jquery-mobile - jQuery Mobile 滑块 - 使输入能够违反步骤

Question

我有一个 jQuery Mobile Slider 元素。它是一个百分比，因此最小值/最大值的范围为 0 到 100。因为它是在手机上使用的，所以我将步长设置为 5，我觉得更容易达到 25% 或 50% 之类的东西。但是说有人想要66%。我希望他们能够在输入框中输入此值并将滑块更新为 66%。相反，滑块回落到 65%。

我可以允许直接编辑输入框以更改滑块值吗？

Answer 1

一旦用户输入自定义值，您就可以将step值更改为您想要的任何值。稍后，更改step为原始值。

演示

$(document).on('focus', '#slider-1', function () {
 $(this).attr('step', '1');
});

$(document).on('click', '.ui-slider-handle', function () {
 $('#slider-1').attr('step', '10');
});

Answer 2

我会建议类似于 Omar 的解决方案，但step默认情况下会保留较低的值并使用 jQuery 移动slidestart和slidestop事件。在我的情况下，它更可靠。

$('#slider').on('slidestart', function(event) {
    $(this).attr('step', '5');
});

$('#slider').on('slidestop', function(event) {
    $(this).attr('step', '1');
});

JSFiddle 示例