如何实现支持负值的HTML range类型滑动条？

问题根因 #

原生<input type="range">有两个默认规则，你之前的写法刚好不符合：

1. min属性值必须小于max属性值，你设置min=-20、max=-90，相当于min大于max，不符合属性规范，浏览器会自动修正属性值，导致步长计算逻辑异常
2. 滑动条的可选值默认从min值开始累加步长计算，公式为：可选值 = min + n * step（n为非负整数，且可选值≤max），你之前的设置步长起始点不对，自然无法匹配你要的取值列表

解决方案 #

方案1：直接调整属性适配需求（无额外逻辑） #

如果你想要的可选值固定为-20、-35、-50、-65、-80，直接调整属性如下即可：

<!-- dir="rtl" 可以让滑动条左半部分对应大值、右半部分对应小值，符合你原来的交互预期 -->
<input type="range" min="-80" max="-20" step="15" value="-20" dir="rtl">

属性调整后，步长计算逻辑为：-80 + n*15，n取0到4时刚好覆盖你需要的所有取值，不会出现多余的-90选项。

方案2：值映射方案（适配更复杂的自定义取值场景） #

如果后续你需要调整取值列表更灵活，可以用无实际业务含义的档位做中间层映射：

• 滑动条设置min=0、max=4、step=1
• 取值时做一层换算：实际业务值 = -20 - 滑动条选中值 * 15
  换算后对应关系为：0→-20、1→-35、2→-50、3→-65、4→-80，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者Heyyy Marco