HTML range输入框值偏差1问题排查：设置min属性后为何返回24而非预设的25？

这是个很典型的浏览器表单校验行为问题，咱们一步步来理清楚：

问题重现 #

你的JS代码：

const input = document.querySelector("#Tester");
console.log(input);
console.log(input.value);

对应的HTML：

<input type="range" id="Tester" min="4" max="250" step="5" value="25" />

实际输出：

<input type="range" id="Tester" min="4" max="250" step="5" value="25" /> 24

核心原因 #

浏览器对于<input type="range">有一套自动校验和修正规则：设置的value必须满足 (value - min) 能被 step 整除，如果不满足，浏览器会自动将值调整到最近的合法值。

咱们来算一下你的参数：

• min=4，step=5
• 合法值的序列是：4, 4+5=9, 9+5=14, 19, 24, 29...
• 你设置的value=25，不在这个序列里，浏览器就会把它修正成离25最近的合法值——也就是24（比25小的那个最近值）。

而当你移除min属性时，浏览器会使用默认的min=0，这时候(25-0) %5=0，完全符合规则，所以value就能正确返回25了。

解决办法 #

根据你的需求，有几种可选方案：

• 调整初始value为合法值：把value改成24或者29，这样就不会触发浏览器的自动修正
• 调整min或step参数：比如把min改成0，或者step改成1，或者把min设为5，这样5+5*4=25就符合(25-5)%5=0的规则了
• 如果必须保留现有参数：可以在页面加载后用JS手动计算合法值再设置，但本质上还是要遵循(value-min) % step ===0的规则，比如计算Math.round((25-4)/5)*5 +4，结果就是24，其实还是回到合法值序列里

内容的提问来源于stack exchange，提问作者Tom Gullen