时间戳

首页 > 解决方案 > Range slider with min and max values limites

javascript - Range slider with min and max values limites

问题描述

I have this code, which displays a range slider with values from 1 to 100 and 4 squares of different values, i have the minimum value limite handler on the range line, as i increase the value using the handler, the squares that are bellow that value start the disapeer.

Now i want to add the maximum handler limite on the same line. ( One line with 2 handlers )

Anybody knows how ?

Thanks.

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>

标签： javascriptjquerycsshtml

解决方案

Take a look at the jQuery UI http://jqueryui.com/slider/#range or take a look at this answer https://stackoverflow.com/a/31083391/7993505 for a variant without jQuery UI.

推荐阅读