问题
I'm stuck.. I want to create multiple range sliders with noUiSlider. Each slider has to handle between to values [0,100]; (min=0, max=100,). Moreover i need a output and input of values by handler and entered by User.
See my current code here:
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>Would be really nice if somebody could help me. Thank's. Best regards.
回答1:
Faced a similar problem. Spent 3 days on the solution. The solution is not optimal. But now this is the best I can offer.
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;
}
});
});
});
Fiddle
来源：https://stackoverflow.com/questions/46954619/how-to-load-multiple-sliders-handling-between-2-values-with-input-and-output-wit