如何加载多个滑块处理2个值与输入和输出noUiSlider？

我被困了..我想用noUiSlider创建多个范围滑块。 每个滑块必须处理值[0,100]; （min = 0，max = 100，）。 此外，我需要按处理程序输出和输入值，并由用户输入。

在这里查看我当前的代码：

function data ( element, key ) { return element.getAttribute('data-' + key); } var connectSlider = document.getElementsByClassName('slider'); var input0 = document.getElementsByClassName('input-format-0'); var input1 = document.getElementsByClassName('input-format-1'); var inputs = [input0, input1]; function createSlider ( slider ) { noUiSlider.create( connectSlider,{ start: [0, 100], connect: false, step: Number(data(slider, 'step')) || 1, range: { 'min': [0], 'max': [100], }, tooltips: true, connect: true, format: { to: function (value) { return value + '%'; }, from: function (value) { return value.replace('%', ''); }, } }); } connectSlider.noUiSlider.on('update', function( values, handle ) { inputs[handle].value = values[handle]; }); Array.prototype.forEach.call(document.querySelectorAll('.slider'), createSlider); function setSliderHandle(i, value) { var r = [null,null]; r[i] = value; connectSlider.noUiSlider.set(r); } // Listen to keydown events on the input field. inputs.forEach(function(input, handle) { input.addEventListener('change', function(){ setSliderHandle(handle, this.value); }); input.addEventListener('keydown', function( e ) { var values = connectSlider.noUiSlider.get(); var value = Number(values[handle]); // [[handle0_down, handle0_up], [handle1_down, handle1_up]] var steps = connectSlider.noUiSlider.steps(); // [down, up] var step = steps[handle]; var position; // 13 is enter, // 38 is key up, // 40 is key down. switch ( e.which ) { case 13: setSliderHandle(handle, this.value); break; case 38: // Get step to go increase slider value (up) position = step[1]; // false = no step is set if ( position === false ) { position = 1; } // null = edge of slider if ( position !== null ) { setSliderHandle(handle, value + position); } break; case 40: position = step[0]; if ( position === false ) { position = 1; } if ( position !== null ) { setSliderHandle(handle, value - position); } break; } }); }); 

如果有人可以帮助我，真的很好。 谢谢。 最好的祝福。

Answer 1

面临类似的问题。 花了3天时间解决了这个问题。 解决方案不是最佳的。 但现在这是我能提供的最好的。

HTML：

 
 from  to  
 
 
 
 
 
 from  to  
 
 
 
 
 
 from  to  
  

JS：

 var rangeSlidersTrack = document.querySelectorAll('.custom-range-slider .custom-range-slider__track'); var rangeSlidersInputFrom = document.querySelectorAll('.custom-range-slider .custom-range-slider__input--from'); var rangeSlidersInputTo = document.querySelectorAll('.custom-range-slider .custom-range-slider__input--to'); var rangeSliderInputs = []; for(var i = 0; i < rangeSlidersTrack.length; i++) { rangeSliderInputs.push([rangeSlidersInputFrom[i], rangeSlidersInputTo[i]]); } [].slice.call(rangeSlidersTrack).forEach(function(slider, index) { noUiSlider.create(slider, { start: [0, 500], connect: true, range: { 'min': 0, 'max': 500 } }).on('update', function(values, handle) { rangeSliderInputs[index][handle].value = parseInt(values[handle]); }); function setSliderHandle(i, value) { var r = [null,null]; r[i] = value; slider.noUiSlider.set(r); } rangeSliderInputs[index].forEach(function(input, handle) { input.addEventListener('change', function(){ setSliderHandle(handle, this.value); }); input.addEventListener('keydown', function(e) { var values = slider.noUiSlider.get(); var value = Number(values[handle]); // [[handle0_down, handle0_up], [handle1_down, handle1_up]] var steps = slider.noUiSlider.steps(); // [down, up] var step = steps[handle]; var position; // 13 is enter, // 38 is key up, // 40 is key down. switch (e.which) { case 13: setSliderHandle(handle, this.value); break; case 38: // Get step to go increase slider value (up) position = step[1]; // false = no step is set if ( position === false ) { position = 1; } // null = edge of slider if ( position !== null ) { setSliderHandle(handle, value + position); } break; case 40: position = step[0]; if ( position === false ) { position = 1; } if ( position !== null ) { setSliderHandle(handle, value - position); } break; } }); }); }); 

小提琴