使用多个滑块更新输入值

Question

I've been using nouislider https://refreshless.com/nouislider/ . The slider must handle with two values. This one works but i need it multiple times (about 10 sliders). Each slider must have his own 2 inputs (like the fiddle below)

How can i use this for more than one slider:

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

fiddle: https://jsfiddle.net/cprixi/haqjk8vb/6/

Answer 1

You can use following code with your change if required

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

Core Concept to this is to use arrays to hold the objects.You can also create html elements and append it to the dom in the same loop just to avoid statically defining html before hand.Then you just need to change max value of i in loop to get as many sliders you want.

Fiddle: https://jsfiddle.net/sksethi25/f3qs08db/6/