How can I use just one on(change) function with multiple sliders?

Question

I have multiple noUISliders and I am wanting to have one on(change) function for all of them instead of one for each slider. The on(change) will essentially trigger the same function. Basically it will be some math that will add all the values of the sliders. Do I have to do a loop? I just have an alert in there for testing.

    var slider = $('#slider');
    var slider = slider[0];

    noUiSlider.create(slider, {
        animate: true,
        start: 41,
        step: 5,
        tooltips: [wNumb({decimals: 0})],
        connect: 'lower',
        range: {
            'min':0,
            'max': 1000
        }
    });


    var slider2 = $('#slider2');
    var slider2 = slider2[0];

    noUiSlider.create(slider2, {
        animate: true,
        start: 20,
        step: 1,
        tooltips: [wNumb({decimals: 0})],
        connect: 'lower',
        range: {
            'min':0,
            'max': 100
        }
    });


    var slider3 = $('#slider3');
    var slider3 = slider3[0];

    noUiSlider.create(slider3, {
        animate: true,
        start: 20,
        step: 1,
        tooltips: [wNumb({decimals: 0})],
        connect: 'lower',
        range: {
            'min':0,
            'max': 100
        }
    });

$('#slider')[0].noUiSlider.on('change',function(v,handle){

    alert("slider triggered");

});

Answer 1

You can indeed create a little jQuery.each() loop to achieve your objective:

const start=[41,20,60],
 sliders=$("[id^=slider]").each((i,slider)=>{
 noUiSlider.create(slider, {
   animate: true,
   start: start[i],
   step: 5,
   tooltips: [wNumb({decimals: 0})],
   connect: 'lower',
   range: {'min':0,'max': i?100:1000}
 });
 // you can use the same loop to add an event handler to each slider:
 $(slider).noUiSlider.on("change",function(v,handle){
  console.log(`You just changed the slider with ID ${slider.id}.
The sum of all slider values is ${sliders.reduce((a,sl)=>+sl.value+a,0)}.`);
 });
}).get();

I used the ternary operator (i?100:1000) above so that a different parameter value would be applied for your first slider.

For the start values I changed it to picking a value from a globally defined array (start, see comments below!).