我卡住了......我想用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;
}
});
});
<link href="https://refreshless.com/noUiSlider/distribute/nouislider.min.css" rel="stylesheet"/>
<script src="https://refreshless.com/noUiSlider/distribute/nouislider.js"></script>
<div class="rangefilter">
<div class="slider"></div>
<ul>
<li class="left"><input class="input-format-0" type="text"></li>
<li class="right"><input class="input-format-1" type="text"></li>
</ul>
</div>
如果有人可以帮助我真的很好。 谢谢＆＃39; S。 最好的祝福。
答案 0 :(得分：0)
面临类似的问题。在解决方案上花了3天时间。解决方案不是最佳的。但现在这是我能提供的最好的。
HTML：
<div class="custom-range-slider">
<span class="custom-range-slider__input-text">from</span>
<input class="custom-range-slider__input custom-range-slider__input--from" type="number">
<span class="custom-range-slider__input-text">to</span>
<input class="custom-range-slider__input custom-range-slider__input--to" type="number">
<div class="custom-range-slider__track"></div>
</div>
<br>
<br>
<br>
<div class="custom-range-slider">
<span class="custom-range-slider__input-text">from</span>
<input class="custom-range-slider__input custom-range-slider__input--from" type="number">
<span class="custom-range-slider__input-text">to</span>
<input class="custom-range-slider__input custom-range-slider__input--to" type="number">
<div class="custom-range-slider__track"></div>
</div>
<br>
<br>
<br>
<div class="custom-range-slider">
<span class="custom-range-slider__input-text">from</span>
<input class="custom-range-slider__input custom-range-slider__input--from" type="number">
<span class="custom-range-slider__input-text">to</span>
<input class="custom-range-slider__input custom-range-slider__input--to" type="number">
<div class="custom-range-slider__track"></div>
</div>
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;
}
});
});
});