当我将我的nouislider设置为 ltr 时,它可以通过按键顺畅地上下移动。 http://jsfiddle.net/jeff_chung/L8md5251/
<div class="example">
<div id="keypress" class="noUi-target noUi-ltr noUi-horizontal noUi-background">
</div>
<input type="text" id="input-with-keypress">
</div>
<script>
var keypressSlider = document.getElementById('keypress'),
input = document.getElementById('input-with-keypress');
noUiSlider.create(keypressSlider, {
start: 0.66,
direction: 'ltr',
connect: 'lower',
range: {
'min': [0.66, 0.22],
'14.29%': [1, 0.33],
'28.57%': [2, 0.67],
'42.86%': [5, 1.67],
'57.14%': [10, 3.33],
'71.43%': [20, 6.67],
'85.71%': [40, 13.33],
'max': 80
}
});
keypressSlider.noUiSlider.on('update', function(values, handle) {
input.value = values[handle];
});
input.addEventListener('change', function() {
keypressSlider.noUiSlider.set([null, this.value]);
});
// Listen to keydown events on the input field.
input.addEventListener('keydown', function(e) {
// Convert the string to a number.
var value = Number(keypressSlider.noUiSlider.get()),
sliderStep = keypressSlider.noUiSlider.steps()
// Select the stepping for the first handle.
sliderStep = sliderStep[0];
// 13 is enter,
// 38 is key up,
// 40 is key down.
switch (e.which) {
case 13:
keypressSlider.noUiSlider.set(this.value);
break;
case 38:
keypressSlider.noUiSlider.set(value + sliderStep[1]);
break;
case 40:
keypressSlider.noUiSlider.set(value - sliderStep[0]);
break;
}
});
</script>
但是,如果我将其设置为 rtl ,则当它达到2时无法上下移动,但鼠标滚动时可以正常 http://jsfiddle.net/jeff_chung/po2rcj7z/1/
<div class="example">
<div id="keypress" class="noUi-target noUi-ltr noUi-horizontal noUi-background">
</div>
<input type="text" id="input-with-keypress">
</div>
<script>
var keypressSlider = document.getElementById('keypress'),
input = document.getElementById('input-with-keypress');
noUiSlider.create(keypressSlider, {
start: 0.66,
direction: 'rtl',
connect: 'lower',
range: {
'min': [0.66, 0.22],
'14.29%': [1, 0.33],
'28.57%': [2, 0.67],
'42.86%': [5, 1.67],
'57.14%': [10, 3.33],
'71.43%': [20, 6.67],
'85.71%': [40, 13.33],
'max': 80
}
});
keypressSlider.noUiSlider.on('update', function(values, handle) {
input.value = values[handle];
});
input.addEventListener('change', function() {
keypressSlider.noUiSlider.set([null, this.value]);
});
// Listen to keydown events on the input field.
input.addEventListener('keydown', function(e) {
// Convert the string to a number.
var value = Number(keypressSlider.noUiSlider.get()),
sliderStep = keypressSlider.noUiSlider.steps()
// Select the stepping for the first handle.
sliderStep = sliderStep[0];
// 13 is enter,
// 38 is key up,
// 40 is key down.
switch (e.which) {
case 13:
keypressSlider.noUiSlider.set(this.value);
break;
case 38:
keypressSlider.noUiSlider.set(value + sliderStep[1]);
break;
case 40:
keypressSlider.noUiSlider.set(value - sliderStep[0]);
break;
}
});
</script>
答案 0 :(得分:1)
我认为您的代码没有任何问题,因为它遵循noUiSlider页面上的示例:
input.addEventListener('keydown', function( e ) {
// Convert the string to a number.
var value = Number( keypressSlider.noUiSlider.get() ),
sliderStep = keypressSlider.noUiSlider.steps()
// Select the stepping for the first handle.
sliderStep = sliderStep[0];
// 13 is enter,
// 38 is key up,
// 40 is key down.
switch ( e.which ) {
case 13:
keypressSlider.noUiSlider.set(this.value);
break;
case 38:
keypressSlider.noUiSlider.set( value + sliderStep[1] );
break;
case 40:
keypressSlider.noUiSlider.set( value - sliderStep[0] );
break;
}
});
在我看来,原来的noUiSlider代码存在bug。按照原始示例,此小提琴http://jsfiddle.net/ubr37u5n/完美无缺,然而,将方向更改为 rtl 会导致与您遇到的行为相同,并且滑块将停留在的值300 ,你可以在这个小提琴http://jsfiddle.net/p6kkr2hv/中看到。
它以某种方式连接到非线性设置,当我删除此设置时,它开始使用 ltr 和 rtl 这两个方向,如下所示:{ {3}}