Question

我一直在使用nouislider https://refreshless.com/nouislider/。滑块必须处理两个值。这个可以工作，但我需要多次（大约10个滑块）。每个滑块必须有自己的2个输入（如下面的小提琴）

如何将它用于多个滑块：

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
            start: [1, 10000000],
      range: {
        'min': 1,
        'max': 1000000
      },
      connect: true,
      step: 1
});

var valueInputMin = document.getElementById('valueInputMin');
var valueInputMax= document.getElementById('valueInputMax');
slider.noUiSlider.on('update', function( values, handle ) {
    if ( handle ) {
        valueInputMax.value = values[handle];
    } else {
        valueInputMin.value = values[handle];
    }
});

valueInputMin.addEventListener('change', function(){
    slider.noUiSlider.set([this.value,null]);
});
valueInputMax.addEventListener('change', function(){
    slider.noUiSlider.set([null, this.value]);
});

小提琴：https://jsfiddle.net/cprixi/haqjk8vb/6/

Answer 1

如果需要，您可以使用以下代码进行更改

var sliders= [];
var valueInputMin = [];
var valueInputMax=  [];

// change i to as many html element you have
// you can also create and a html in the same loop
for(var i=1; i<=2; i++){
    sliders[i] = document.getElementById('slider'+i);

  noUiSlider.create(sliders[i], {
        start: [0, 100],
        range: {
          'min': 0,
          'max': 100
        },
        connect: true,
        step: 1
  });

  valueInputMin[i] =    document.getElementById('valueInputMin'+i);
  valueInputMax[i] = document.getElementById('valueInputMax'+i);

   sliders[i].noUiSlider.on('update', function(values, handle)        {
   var id = this.target.id;
   var index = id.charAt(id.length - 1);
    if ( handle ) {
      valueInputMax[index].value = values[handle];

    } else {
      valueInputMin[index].value = values[handle];
    } 
});

 valueInputMin[i].addEventListener('change', function(event){
  // index can be found with better other ways
   var id = this.target.id;
   var index = id.charAt(id.length - 1);
   sliders[index].noUiSlider.set([this.value,null]); 
    });


  valueInputMax[i].addEventListener('change', function(event){
   // index can be found with better other ways
    var id = this.target.id;
    var index = id.charAt(id.length - 1);
     sliders[index].noUiSlider.set([null, this.value]); 
  });
}

核心概念就是使用数组来保存对象。你也可以创建html元素并将其附加到同一循环中的dom，以避免在手动之前静态定义html。然后你只需要更改最大值我循环播放你想要的滑块。

小提琴：https://jsfiddle.net/sksethi25/f3qs08db/6/

更新输入值多个滑块

1 个答案: