具有两个数字输入的多个滑块

Question

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

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]);
  }

<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">

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.

已更新fiddle：

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

具有两个数字输入的多个滑块

Multiple sliders with two number inputs

javascript

jquery

plugins

slider

nouislider