我有代码创建动态 slider ,供用户选择频率(从 118.000 Mhz 到 136.975 Mhz)。该列表是动态的,因此用户可以添加或删除频率(及其 slider )。但我有两个问题:
步骤不起作用。它对于“15”或更高值完美工作,但低于此值,步骤不起作用。如果我使用“10”,步数变为 20。如果我选择 5 作为步数(这是我需要的值),则相同。
我无法使用键盘输入!我可以让它与静态代码(例如:静态 div、值等)一起使用,但不能与此动态代码一起使用。另外,键盘输入还存在两个问题。
- 它总是移动列表的最后一项(可能是因为“我”,该事件在事件中不存在......但我不知道如何解决/修复它)。
- 该值始终滑动到 slider 的最大值或最小值。如果我输入
->
然后 slider 移动到最大值。如果我输入<-
然后 slider 移动到最小值。
有什么建议吗?
var freqs = ["118000", "119550", "121725"];
for (var i = 0; i < freqs.length; i++) {
var $last = $('#freq_table').find('tbody').append("<tr><td class='col-md-2' id='value_freq_" + i + "'>oi</td><td class='col-md-8 center slider' id='td_slider_" + i + "'><div id='slider_" + i + "'></div></td></tr>");
var tmp = noUiSlider.create($('#slider_' + i).get(0), {
start: freqs[i],
step: 10,
range: {
'min': 118000,
'max': 136975
},
format: wNumb({
decimals: 3,
thousand: '.'
}),
}).on('update', function(values, handle) {
var id = this.target.id.slice(-1);
$('#value_freq_' + id).html(values[handle] + ' Mhz');
freqs[id] = values[handle];
});
var item = $('#slider_' + i).get(0);
var handle = item.querySelector('.noUi-handle');
handle.addEventListener('keydown', function(e) {
var value = Number(item.noUiSlider.get());
if (e.which === 37) {
item.noUiSlider.set(value - 10);
}
if (e.which === 39) {
item.noUiSlider.set(value + 10);
}
});
};
最佳答案
您遇到的问题是由 wNumb
引起的选项decimals: 3
这会影响 .get()
您的keydown
的值(value)处理程序。实际上,它返回除以 1000 的值。要更正此问题,请在调用 .get()
之后,然后您需要在加/减 5(或任何步长值)之前将该值重新乘以 1000。
我注意到的另一个问题是 keydown
事件仅绑定(bind)到 for
中的最后一个 slider 无论您用鼠标单击/滑动哪个 slider ,都会循环。原因是 item
的值在 keydown
事件总是#slider_2
(2 来自最后一次循环迭代)。要解决此问题,请使用以下语句将变量分配给刚刚单击的 slider var slider = $(this).closest('.noUi-target')[0];
。
一些用户体验增强
- 您可以通过点击 slider 旁边的标签来激活 slider ,然后使用键盘移动 slider 。
- 使用 slider 步长为 5 的键盘会非常缓慢地移动 slider 。因此,我添加了加速器计算,按键保持按下的时间越长, slider 的速度就越快,释放时重置。这使得键盘具有完整的粒度,而不会变得非常慢。
var freqs = ["118000", "119550", "121725"];
var stepSize = 5; // stepSize for the slider and arrow key increments
// Populate sliders by looping the freqs array
for (var i = 0; i < freqs.length; i++) {
// Append label and slider to table
var $last = $('#freq_table').find('tbody').append("<tr><td class='col-md-2' id='value_freq_" + i + "'>oi</td><td style='' class='col-md-8 center slider' id='td_slider_" + i + "'><div id='slider_" + i + "'></div></td></tr>");
// Create the noUiSlider
var tmp = noUiSlider.create($('#slider_' + i).get(0), {
start: freqs[i],
step: stepSize,
range: {
'min': 118000,
'max': 136975
},
format: wNumb({
decimals: 3,
thousand: '.'
}),
}).on('update', function(values, handle) {
var id = this.target.id.slice(-1);
$('#value_freq_' + id).html(values[handle] + ' Mhz');
freqs[id] = values[handle]; // Update the freqs array with new slider value
});
var item = $('#slider_' + i).get(0);
var handle = item.querySelector('.noUi-handle');
var keydownIteration = 1; // track iterations of keydown until keyup. To be used for slider acceleration.
// Add keyboard event to the slider handle
handle.addEventListener('keydown', function(e) {
var slider = $(this).closest('.noUi-target')[0];
var value = Number(slider.noUiSlider.get()) * 1000;
var multiplier = Math.floor(keydownIteration/10) + 1; // multiplier will be used to calculate slider acceleration
if (e.which === 37) {
slider.noUiSlider.set(Math.trunc(value - stepSize*multiplier));
}
if (e.which === 39) {
slider.noUiSlider.set(Math.trunc(value + stepSize*multiplier));
}
keydownIteration++; // increment counter
});
// Add keyboard event to the slider handle
handle.addEventListener('keyup', function(e) {
keydownIteration = 1; // resetting the iteration also resets accelaration
});
};
// When clicking on the label, focus and click the slider
$('#freq_table').on('click', 'td:first-child', function () {
$(this).closest('tr').find('.noUi-handle').focus().click();
});
#freq_table td:nth-child(2) {
width : 300px;
}
#freq_table td:first-child {
cursor : pointer;
}
#freq_table td {
padding : 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.3/nouislider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.0.3/nouislider.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="freq_table">
<thead>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
关于javascript - 步骤在 noUISlider 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48975049/