Question

我试图让noUiSlider在同一页面的多个位置上使用一个班级。现在我有2个滑块，两个都工作正常，除了一个奇怪的行为，当我改变第二个输入的值，它实际上更新了第一个句柄和输入。如果有人帮助我，我会感激不尽。

＆＃13;

function bindValues(price_slider, inputNumberMin, inputNumberMax){
       price_slider.noUiSlider.on('update', function( values, handle ) {
        var value = values[handle];

        if ( handle ) {
            inputNumberMax.value = Math.round(value);
        } else {
            inputNumberMin.value = Math.round(value);
        }
      });
      inputNumberMin.addEventListener('change', function(){
          price_slider.noUiSlider.set(this.value);
      });
      inputNumberMax.addEventListener('change', function(){
          price_slider.noUiSlider.set(this.value);     
      });

  }
  var price_sliders = $('.price-filter');
  var inputsNumberMin = $('.price-filter-min-price');
  var inputsNumberMax = $('.price-filter-max-price');
  for ( var i = 0; i < price_sliders.length; i++ ) {
      noUiSlider.create(price_sliders[i], {
          start: [0, 100],
          connect: true,
          range: {
              'min': 0,
              'max': 100
          }
      });
      bindValues(price_sliders[i], inputsNumberMin[i], inputsNumberMax[i]);
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.css" rel="stylesheet"/>

<div class="price-filter"></div>
<input type="number" class="price-filter-min-price">
<input type="number" class="price-filter-max-price">
<div class="price-filter"></div>
<input type="number" class="price-filter-min-price">
<input type="number" class="price-filter-max-price">

＆＃13;

Answer 1

你的问题在于：

  inputNumberMin.addEventListener('change', function(){
      price_slider.noUiSlider.set(this.value);
  });
  inputNumberMax.addEventListener('change', function(){
      price_slider.noUiSlider.set(this.value); // <<< here   
  });

set方法获取整个滑块的值数组。如果传递单个值，则在第一个句柄上设置。相反，您必须明确要更新哪个值：

price_slider.noUiSlider.set([null, this.value]); // 'null' values are ignored.

更新了小提琴：

http://jsfiddle.net/leongersen/z83oz9np/268/

多个滑块，带有两个数字输入

1 个答案: