Question

我有这段代码，它显示一个范围为1至100的值和4个不同值的平方的范围滑块，我在范围线上具有最小值limite处理程序，因为我使用该处理程序增加了该值，正是这种价值导致了疾病的消失。

现在，我想在同一行上添加最大处理程序限制。（一行包含2个处理程序）

有人知道吗？

谢谢。

function sliderChange(val) {

  document.getElementById('sliderStatusMin').innerHTML = val;

  function displayItem(val) {
    $('.item').filter(function() {
      var price = $(this).data('price');
      if (price < val) {
        return price;
      }

    }).hide();

    $('.item').filter(function() {
      var price = $(this).data('price');
      if (price > val) {
        return price;
      }

    }).show();
  }
  
  displayItem(val);
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

<!DOCTYPE html>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">
</script>

<input class="first" type="range" min="0" max="100" value="50" step="2" onChange="sliderChange(this.value)" />

<br /><br /> Minimum Value = <span id="sliderStatusMin"></span>

<div class="item" data-price="90">90</div>
<div class="item" data-price="20">20</div>
<div class="item" data-price="70">70</div>
<div class="item" data-price="40">40</div>

Answer 1

看看jQuery UI http://jqueryui.com/slider/#range 要么看看这个答案https://stackoverflow.com/a/31083391/7993505是没有jQuery UI的变体。

带有最小和最大值限制的范围滑块

1 个答案: