Question

我试图逐个使用输入范围。例如，这是我的滑块：

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

真的很基本。但问题是你只需点击一下就可以自由地从5移动到89。我想要实现的只是增加或减少一个因此，如果我移动光标，我的值将会是这样：

0 - ＆gt; 1 - ＆gt; 2 - ＆gt; 3 - ＆gt; 4

然后如果我回去：

4 - ＆gt; 3 - ＆gt; 2 - ＆gt; 1 - ＆gt; 0

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

4800 - ＆gt; 4799 - ＆gt; 4790 - ＆gt; 4785

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

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

谢谢！

Answer 1

我不建议限制滑块控件的默认功能，因为人们希望它以某种方式工作：当控件有焦点时，还要考虑使用arrow / page / home / end键拖动滑块， ...

但是为了练习，这里的代码将使滑块值仅增加/减少1.因此，如果拖动，该值将慢慢赶上鼠标位置。此解决方案使用数据属性来跟踪以前的值：

＆＃13;

$('#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)
    });
});

＆＃13;

<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">

＆＃13;

使用动画

作为此想法的扩展，您可以使用animate方法来处理目标值的进展：

＆＃13;

$('#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
        }
    });
});

＆＃13;

<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">

＆＃13;

如评论中所示，您可以使用动画选项duration和ease进行一些实验，以根据您的需要进行定制。

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

输入范围仅移动一步

1 个答案:

使用动画