html5原生仅支持单滑块，双滑块需用两个range控件+js互锁逻辑实现；其核心是实时校验left≤right、监听input事件、统一step、避免循环触发，并注意各浏览器伪元素兼容性差异。
HTML5原生<input type="range">不支持双滑块
浏览器原生的 <input type="range"> 只能单点控制，所谓“双滑块区间选择”是常见误解。你看到的双滑块效果，全是靠 JS + CSS 模拟出来的——不是 HTML5 标准能力，别在文档里找 min 和 max 以外的原生双值属性。
常见错误现象：input[type="range"] 上加两个 value、或试图用 data-min-value / data-max-value 让它自动识别区间，结果完全没响应；监听 change 事件也只拿到一个值。
- 真正可用的原生属性只有：
min、max、step、value（单值） - 双滑块本质是两个独立
<input type="range">共享样式 + 互相约束逻辑（比如左滑块不能超过右滑块） - 移动端兼容性差：iOS Safari 对
input[type="range"]的 touch 事件响应延迟高，拖动卡顿明显
用两个 <input type="range"> 实现区间控制的关键约束逻辑
核心不是画得像不像，而是左右滑块的数值关系必须实时互锁。否则用户会拖出 leftValue > rightValue 的无效区间，后续业务逻辑直接崩。
使用场景：价格筛选、时间范围、音量/亮度分段调节等需要上下界明确的交互。
立即学习“前端免费学习笔记（深入）”；
- 监听两个
input的input事件（不是change），保证拖动过程就校验 - 每次更新前先读取对方当前
value，再设自己的新值：比如右滑块要设为Math.max(newRight, leftValue) - 避免循环触发：设置
value时需跳过自身触发的下一次事件（可用event.target === this判断，或加 flag） -
step必须一致，否则校验逻辑会因取整偏差失效（例如step="0.1"和step="1"混用）
const left = document.getElementById('left-range');
const right = document.getElementById('right-range');
<p>left.addEventListener('input', () => {
const l = parseFloat(left.value);
const r = parseFloat(right.value);
if (l >= r) right.value = (l + 0.1).toFixed(1); // 防止相等粘连
});
right.addEventListener('input', () => {
const l = parseFloat(left.value);
const r = parseFloat(right.value);
if (r <= l) left.value = (r - 0.1).toFixed(1);
});CSS 重绘滑块轨道时，::-webkit-slider-runnable-track 和 ::thumb 的坑
Chrome/Edge 用伪元素定制外观，但 Safari（尤其 iOS）对 ::-webkit-slider-runnable-track 支持不稳定，且不支持渐变背景裁剪——你写的 background: linear-gradient(...) 很可能整个轨道都染成同一种颜色，而不是按滑块位置分段着色。
性能影响：过度使用 box-shadow 或 filter 在滑动时会造成掉帧，尤其低端安卓机。
- 轨道分段着色必须用 JS 动态改
background内联样式（通过计算百分比位置 +linear-gradient字符串拼接） -
::-webkit-slider-thumb无法用transform做平滑缩放，iOS 下会闪烁；建议用固定尺寸 +border-radius控制圆角 - Firefox 完全不支持这些 WebKit 伪类，要用
@supports selector(::-moz-range-track)单独写一套 - 不要给
input[type="range"]设width: 100%后再套 flex 容器——某些 Android WebView 会把 thumb 渲染到轨道外
替代方案：用 noUiSlider 还是手写？
如果你只是做一次性页面、区间逻辑简单（如价格 0–1000 元），手写两个 input + 约束逻辑 + 基础 CSS 更轻量、调试快、无额外依赖。
但遇到以下情况，直接上 noUiSlider（v15+）更省事：
- 需要支持触摸拖拽、键盘方向键、点击轨道跳转
- 要显示动态 tooltip（随滑块移动的数值浮层）
- 区间值需绑定到 URL 参数（如
?price_min=200&price_max=800） - 服务端渲染 SSR 场景下需服务端生成初始状态
注意：noUiSlider 默认不处理 iOS click 延迟，得手动加 touch-action: none；另外它的 set 方法是异步的，连续调用可能丢值，要用 setTimeout 或 Promise.resolve() 做节流。
复杂点不在实现，在边界：比如用户快速来回拖动时，left 和 right 的值抖动、事件触发顺序错乱、移动端 touchend 丢失……这些细节没日志压根定位不到。
