原生 最直接但样式难控、移动端体验差；需设 min/max/step，用 input 事件实时响应，手动处理 touch 事件修复拖动断连，复杂需求宜自定义实现。
用 <input type="range"> 最直接，但默认样式丑且难控
浏览器原生支持滑动条，不用 js 就能拿到数值，value 实时更新，change 或 input 事件监听即可。但它默认长得千篇一律，ios 上拖动区域窄、android 上 thumb 太小，而且 CSS 定制能力有限——webkit 内核要用 ::-webkit-slider-thumb，firefox 要用 ::thumb，IE/edge 旧版本干脆不支持伪元素定制。
常见错误是只写 input[type=range] 就完事，没设 min/max/step，结果用户拖出范围外值或跳变太大；或者监听了 change 却忽略 input，导致实时反馈卡顿（比如配合显示数字的 <output></output> 标签时）。
- 必须显式设置
min、max、step，哪怕只是step="1" - 想实时响应拖动？用
input事件，不是change - 搭配
<output></output>显示当前值更可靠：<output for="vol" id="vol-value">50</output>，再用 JS 绑定vol.value
移动端触摸体验差？得手动处理 touchstart/touchmove
原生 <input type="range"> 在 iOS safari 和部分安卓 webview 中，手指一碰就触发 input，但拖动过程中容易断连、跳值，甚至被页面滚动劫持。这不是 bug，是浏览器对 touch 事件的默认行为抑制了连续拖动。
解决办法不是重写整个滑块，而是用 JS 拦截并模拟：监听 touchstart 获取初始位置，touchmove 计算偏移比例，再手动设置 input.value。关键点在于禁用默认行为（e.preventDefault()），否则页面会跟着滑动。
立即学习“前端免费学习笔记（深入）”；
- 必须在
touchstart里调用e.preventDefault()，否则 iOS 下拖不动 -
touchmove中别直接改input.valueAsNumber，先算比例再赋值，避免越界 - 别忘了补上
touchend和touchcancel，清理状态，防止“粘滞”现象
需要精确控制或带刻度？range 不够用，得换方案
如果需求是“每 5px 对应 1 单位”、“显示等距刻度线”、“支持键盘方向键微调”，原生 range 就力不从心了。它的 step 只管数值粒度，不管视觉精度；刻度需靠额外 dom 拼接，且无法与 thumb 同步定位。
这时候更适合用 <div> + <code>position: relative + absolute thumb，配合 getBoundingClientRect() 计算鼠标/触点位置。好处是完全可控：刻度可 SVG 渲染、thumb 可加阴影、拖动可加 easing 动画。
- 用
clientX/clientY减去容器left/top得到相对坐标，再映射到 min/max 区间 - 键盘支持别漏掉：
ArrowLeft/ArrowRight改值，PageUp/PageDown大步进 - 注意无障碍：要加
role="slider"、aria-valuemin、aria-valuenow等属性
兼容性底线在哪？别为 IE10 以下折腾
IE9 完全不支持 input[type=range]，IE10 开始支持但无事件冒泡、无伪元素样式；iOS 12.2+ 才修复 input 事件在 touch 下的丢失问题。真要保老版本，fallback 方案只能是文本框 + 加减按钮，或者降级为 select 下拉。
现代项目里，优先保障 chrome/Firefox/Safari/Edge 最新版体验，用 @supports (appearance: none) 做样式隔离，比写一堆 hack 更可持续。
- 别用
document.all或 UA 判断 IE，用特性检测更稳 -
appearance: none是定制起点，但 Firefox 需要width+height显式设 thumb 尺寸 - 如果项目已用 React/Vue，别重复造轮子，
react-range或vue-slider-component的底层逻辑其实就这几步
真正麻烦的从来不是“怎么画个滑块”，而是“怎么让手指在不同屏幕尺寸、不同系统惯性下，都感觉它在听你的话”。细节都在 touch 坐标转换、边界 clamp、事件节流和 aria 属性里，少一个，用户就会多一次皱眉。