javascript - 输入范围仅移动一步

Question

我正在尝试使用一个一个地移动输入范围。例如，这是我的 slider :

<input id="replay-input" type="range" min="0" max="100" step="1" value="0">

非常基础。但是问题是你可以从5点一下就自由移动到89点。我想要实现的是仅递增或递减 1，这样如果我移动光标，我的值将如下所示:

0 -> 1 -> 2 -> 3 -> 4

如果我回去:

4 -> 3 -> 2 -> 1 -> 0

对于像 5000 这样大的 max，我们缺少步骤，因为在一个小区域上有太多的值:

4800 -> 4799 -> 4790 -> 4785

有没有办法避免这种情况？一个想法可能是使用 JS 和存储值，并且只允许更改一个，但也许 HTML 中有更简单的东西？

https://jsfiddle.net/vcoyxg4v/5/

谢谢!

Answer 1

我不建议限制 slider 控件的默认功能，因为人们希望它以某种方式工作:还可以考虑拖动 slider ，在控件具有焦点时使用箭头/页面/主页/结束键， ...

但为了练习，这里的代码将使 slider 值仅增加/减少 1。因此，如果拖动，该值将慢慢 catch 鼠标位置。此解决方案使用数据属性来跟踪先前的值:

$('#replay-input').data({
    was: $('#replay-input').val()
}).on('input', function () {
    var data = $(this).data();
    $(this).data({
        was: this.value = +data.was + (this.value > data.was || -1)
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="replay-input" type="range" min="0" max="100" step="1" value="0">

使用动画

作为这个想法的扩展，您可以使用 animate 方法来处理朝向目标值的进展:

$('#replay-input').data({
    current: $('#replay-input').val()
}).on('input', function () {
    var data = $(this).data(),
        value = this.value;
    $(this).data(data = {
        current: this.value = +data.current, // restore previous value
    }).stop().animate({ value }, { // ... and animate towards the target
        duration: 500, // Experiment with other durations...
        easing: 'swing', // Experiment with other easing values...
        step: function(val) {
            $(this).data({current: this.value}) // accept change
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="replay-input" type="range" min="0" max="100" step="1" value="0">

如评论中所述，您可以尝试使用动画选项 duration 和 ease 来根据您的需要进行定制。

点击后会出现轻微的视觉故障，因为 slider 还在 mouseup 上接收到 input 事件。