当步长大于剩余值时，HTML Range 输入不会一直填充答案

【问题标题】：HTML Range input won't fill all the way when step greater than remaining value当步长大于剩余值时，HTML Range 输入不会一直填充
【发布时间】：2019-06-14 03:32:23
【问题描述】：

我的 HTML Range 输入有点问题，我有一个输入，我从 BE 获取配置，我发现了一个奇怪的情况，如果输入的 step 值是大于剩余的值，那么输入就会卡住而不是仅仅填充剩下的东西。

只有当你的最小值、最大值和步长输入有些不平衡时才会发生这种情况

例如

https://jsfiddle.net/jonnyserra/0s1a5oxf/1/

在该示例中，如果您一直填写条形图，您会注意到它下方的一小部分条形图仍然可见，因为它没有完全推动手柄。有没有办法解决这个问题，你们会推荐吗？理想情况下，如果步长值大于在最大值之前剩余的值，我希望它只填写剩余的值。

【问题讨论】：

标签： html input

【解决方案1】：

在 OP 的上下文中，接受的答案是正确的。但是，如果您获得了正确的范围值，但您仍然看到范围输入没有完全填充，那么可能是因为 输入填充。

如果您已应用输入填充，则范围滑块将不会到达末尾。所以删除范围输入的填充：

<input type="range" min="0" max="100" step="10" style="padding:0;">

Demo

【讨论】：

【解决方案2】：

这是因为您在输入元素中设置了最小值、最大值和步长属性：

    &lt;input type="range" min="33062" max="246000" step="10000"&gt;

因为你从 33062 开始，每一步递增 10000，你永远无法完全达到最大值 246000（在超过你设置的最大属性之前你能得到的最接近的是 243062，这导致了差异在您的滑块上）。因此，您应该将最小值和最大值设置为可被步长整除的值。

【讨论】：

嗨，谢谢你的帮助，是的，我明白了，事情是我认为可能有一种方法可以将其四舍五入到最大值，但我可以看到这会如何混乱提高输入的步骤数学。