需显式设min/max/step，用input事件实时更新数值（推荐标签），加touch-action: manipulation优化移动端响应，webkit/firefox伪元素样式须分别适配，避免width:100%导致安卓错位。
HTML 中 <input type="range"> 的基础写法
直接用 <input type="range"> 就能创建滑动条，但默认行为很“裸”：没刻度、没数值反馈、移动端拖动不灵敏。必须手动补全关键属性才能实用。
-
min和max必须显式设置，否则浏览器按默认 0–100 处理，容易误判业务范围 -
step建议明确写，比如想选整数就设step="1"；设step="any"虽支持小数，但会失去input事件的稳定触发节奏 - 别依赖
value属性做初始值——它只在首次渲染时生效，动态修改要用 JavaScript 赋值element.value = "50"
让滑动条显示当前数值的两种可靠方式
用户需要实时看到选中值，但 <input type="range"> 本身不渲染数字。常见错误是只监听 change 事件，结果拖动时不更新，松手才跳变。
- 用
input事件（不是change）监听实时拖动：rangeElement.addEventListener('input', () => { displayEl.textContent = rangeElement.value }) - 如果要兼容 IE，得降级用
change+mousemove组合，但现代项目基本可忽略 IE - 数值显示元素建议用
<output></output>标签，语义正确且天然支持for属性绑定：<output for="myRange">0</output>，再配合oninput内联处理更轻量
移动端滑动卡顿或响应迟钝的原因和修复
iOS Safari 和部分安卓 WebView 对 input[type=range] 的 touch 事件处理有延迟，表现为拖动跟手性差、数值跳变。
- 加
touch-action: manipulation到滑动条样式里，能显著改善 iOS 响应速度 - 避免在
input事件回调里做重绘操作（比如频繁修改 DOM 样式），改用requestAnimationFrame节流 - 某些安卓机型对
step值敏感：设step="0.1"可能导致滑块吸附不准，换成step="1"+ 后端换算更稳
样式定制时最常踩的 CSS 兼容坑
WebKit 内核（Safari、Chrome）用伪元素控制轨道和滑块，Firefox 和 Edge（新）用另一套，IE 完全不支持伪元素定制。
- 轨道样式统一用：
input[type=range]::-webkit-slider-runnable-track（Chrome/Safari）和input[type=range]::-moz-range-track（Firefox） - 滑块样式必须分开写：
::-webkit-slider-thumb和::-moz-range-thumb，漏掉任一就会回退到浏览器默认丑样式 - 不要给
input设width: 100%后再用 flex 布局父容器——某些安卓 WebView 会把滑块渲染错位，改用固定宽度或flex: 1更稳妥
input 事件在快速拖动时的触发频率和数值精度问题。比如设 min="0" max="100" step="1"，用户猛拖可能跳过中间值，此时若业务逻辑依赖每一步的中间状态（如实时预览），就得自己插值计算，不能只信 event.target.value。
