是否可以为显示的输入字段最小值设置样式例如添加边框？

问题描述

我想显示一个滑块输入字段，用作搜索结果的过滤器。然后，用户可以使用滑块选择搜索结果的最低和最高价格。

我不知道最小值和最大值是否有可能分别分隔边界，这是我当前的代码

<div class="filter-item">
  <a href="#" class="filter-link">
    <i class="fas fa-dollar-sign text-primary"></i>Price
  </a>
  <div class="content range-slider-data">
    <label for="price">Price per day range: <input id="price" name="price" min="10" max="20000"
                                                    style="border:0;"
                                                    value="{{ request.GET.price }}"></label>
    <div id="slider1"></div>
    <button class="btn" style="float:left; margin-top:10px; color:#15F1FF; border: 1px solid #15F1FF; border-radius: 30px; font-weight: 100;">
       Apply
    </button>
  </div>
</div>

和随附的JS

$(function () {
  $('.space_card').css('display','block')

  $('#slider1').slider({
    range: true,min: 10,max: 20000,values: [75,500],slide: function (event,ui) {
      $('#price').val('$' + numberWithCommas(ui.values[0]) + ' - $' + numberWithCommas(ui.values[1]))
    }
  })

  if (!$('#price').val()) {
    $('#price').val('$' + numberWithCommas($('#slider1').slider('values',0)) +
    ' - $' + numberWithCommas($('#slider1').slider('values',1)))
  }

  $('#slider2').slider({
    range: true,min: 30,max: 30000,values: [100,5000],ui) {
      $('#size').val(numberWithCommas(ui.values[0]) + ' - ' + numberWithCommas(ui.values[1]))
    }
  })
  if (!$('#size').val()) {
    $('#size').val(numberWithCommas($('#slider2').slider('values',0)) +
    ' - ' + numberWithCommas($('#slider2').slider('values',1)))
  }
  $('#type').multiSelect({
    'noneText': 'Space Type',})
});

现在，我的代码仅返回选择的最小值和最大值，并添加一些文本。我不知道如何使返回的最小值和最大值都有边框。这可能吗？

这是我关于SO的第一个问题，很抱歉，如果我在问这些类型的问题时错过了一些常见的做法。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html input javascript styling