HTML range类型滑块设置min=-90、max=90时无法手动赋值为0问题咨询

问题底层逻辑 #

这不是浏览器Bug，是range类型输入控件的数值-像素映射规则导致的：
range控件会把min到max的数值区间线性映射到滑动轨道的物理像素长度上。你最初的代码中max - min = 90 - (-90) = 180，总步长为偶数，如果滑动轨道的物理像素长度刚好和步长数对应，数值0会刚好落在两个相邻像素的缝隙处，拖动滑块时无法精准落在这个位置，就会自动跳到相邻的-1或1。
你把min改为-91后max - min = 90 - (-91) = 181，总步长为奇数，中间位置刚好对应一个物理像素点，因此0可以正常选中。

不修改min值的解决办法 #

方案1：纯CSS调整（无需JS） #

因为你用的是垂直滑动条，只要给滑动条设置奇数数值的高度即可，让轨道总像素数和总取值个数对应，即可命中0的位置：

.vertRange {
  -webkit-appearance: slider-vertical;
  height: 181px; /* 高度设置为奇数即可，可根据需求调整为其他奇数数值 */
}

HTML保持你最初的写法即可：

<input min="-90" max="90" value="0" step="1" class="vertRange" type="range">

方案2：JS数值校准 #

如果不想限制滑动条尺寸，可以加一段简单的事件监听强制校准数值：

<input min="-90" max="90" value="0" step="1" class="vertRange" type="range" id="angleRange">
<script>
const range = document.getElementById('angleRange');
range.addEventListener('input', () => {
  const currentVal = parseFloat(range.value);
  range.value = Math.abs(currentVal) < 0.5 ? 0 : Math.round(currentVal);
});
</script>

内容的提问来源于stack exchange，提问作者M lab