使用多個滑塊更新輸入值

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。然后您只需更改in的i最大值獲得所需的多個滑塊。

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