Javascript 输入范围仅移动一步

我试图使用输入范围一个接一个地移动。例如，下面是我的滑块：

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

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

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

如果我回去：

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

对于像5000这样的大

max

，我们缺少步骤，因为小区域上的值太多：

4800->4799->4790->4785

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

---

谢谢

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

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

$（'#回放输入'）。数据({
was:$（“#重播输入”）.val（）
}).on（'input'，function（）{
var data=$（this.data（）；
$（此）。数据({
was:this.value=+data.was+（this.value>data.was | |-1）
});
});

只是一个建议，如果有这样大的值，请尝试添加箭头按钮（左-右）或文本框，用户可以在其中输入值，而无需使用幻灯片。希望对您有所帮助。这完全取决于您的浏览器如何解释范围输入。如果你想有一个可复制的行为，你可能应该建立你自己的控件。否则，一个类型为
number
的输入可能会起作用。问题是我真的想保持这样的滑块范围，因为我想创建一个播放系统。它必须是平滑的。你需要把它想象成一个时间轴（这里是一个例子，但我的将与轨道：）谢谢！这是一个很好的方法来实现这一点，但使用它看起来很奇怪，因为光标和滑块之间有很多延迟。也许我需要用另一种方式来思考我的问题。我在我的答案中添加了一种使用动画的替代方法。也许你可以根据自己的需要来做。非常感谢。我会朝这个方向看，试试看！