单个 html 原生 仅支持单值选择，无法表示范围；实现双滑块区间需两个 range 元素配合 js 互锁逻辑，确保 left ≤ right 不变量始终成立。
HTML 原生 <input type="range"> 本身不支持“范围选择”——它只能选一个值，所谓“双滑块区间”是假象，必须靠两个 range + JS 互锁逻辑实现。
为什么单个 range 无法表示范围
浏览器对 type="range" 的定义就是单点数值输入控件，语义上不包含“起止区间”。即使你用 CSS 把两个滑块画得像一根轨道上的两个把手，只要没在 JS 层强制约束 left ≤ right，用户就能拖出 leftValue = 80、rightValue = 20 这种无效状态，后续业务（比如价格筛选、时间过滤）直接失效。
- 表单提交时，每个
range独立提交自己的name=value，没有内置机制把它们当一对处理 -
min/max是各自独立的，A 的max不会自动限制 B 的min - 无障碍支持也按单控件处理，屏幕阅读器不会把两个滑块识别为“区间选择器”
双 range 互锁的关键逻辑怎么写
核心不是视觉同步，而是每次更新前校验并修正对方边界。比如右滑块拖动时，它的新值不能小于左滑块当前值；左滑块拖动时，新值不能大于右滑块当前值。
- 监听两个滑块的
input事件（不是change），确保拖拽中实时响应 - 更新右滑块时：设
rightInput.value = Math.max(newVal, leftInput.value) - 更新左滑块时：设
leftInput.value = Math.min(newVal, rightInput.value) - 注意
value是字符串，计算前先转Number()或用valueAsNumber - 避免循环触发：修改对方值前，先
removeEventListener，改完再加回
step 和 min/max 对区间有效性的影响
如果左右滑块的 step 不一致，或 min/max 范围错位，会导致合法值序列不重叠，出现“明明拖到头了却卡不住”的问题。
- 左右滑块必须用相同
step，否则Math.max后可能落到非法刻度上（如左用step="1"、右用step="0.5"） - 若
min="0" max="1" step="0.33"，合法值只有0、0.33、0.66、0.99，1永远无法被选中 - 建议统一设
step="any"配合 JS 校验，避免步长干扰逻辑判断 - 初始
value必须满足leftValue ≤ rightValue，否则页面一加载就处于非法状态
移动端和 Safari 的实际坑点
iOS Safari 在旧版本（15.4 之前）对 range 的触摸区域极小，且默认样式窄、滑块难按中，用户经常拖不动或误触其他元素。
- 必须加
-webkit-appearance: none并重写::-webkit-slider-thumb样式，放大拖拽靶区 - 加
touch-action: manipulation提升响应优先级，但 iOS 15.4+ 才真正生效 - 不要依赖
list+datalist显示刻度——Safari 对它的支持不稳定，且无法动态绑定区间语义 - 移动端测试重点不是“能不能拖”，而是“拖到边界时是否卡死”“快速来回拖是否跳值”
真正难的不是画两个滑块，而是让它们在任意操作路径下都维持 left ≤ right 这个不变量。很多项目只做了视觉联动，漏掉键盘方向键、粘贴数值、程序化 setValue 等边界情况，上线后才发现筛选结果为空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
