Tengo varios noUISliders y quiero tener una función de encendido (cambio) para todos ellos en lugar de uno para cada control deslizante. El encendido (cambio) esencialmente activará la misma función. Básicamente, serán algunas matemáticas las que agregarán todos los valores de los controles deslizantes. ¿Tengo que hacer un bucle? Solo tengo una alerta allí para probar.
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"); });De hecho, puede crear un pequeño bucle jQuery.each() para lograr su objetivo:
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(); Usé el operador ternario ( i?100:1000 ) anterior para que se aplicara un valor de parámetro diferente para su primer control deslizante.
Para los valores de start , lo cambié para elegir un valor de una matriz definida globalmente ( start , ¡vea los comentarios a continuación!).