用原生 HTML5 实现滑块，需设 min/max/name，value 默认取 min；step 影响键盘步进与值校验；显示数值需配合 和 oninput；移动端需注意 Safari/Android 兼容性及触摸优化。
如何用
HTML5 中的范围滑块直接用 元素实现，不需要额外 JS 就能渲染为原生滑动条。它默认是水平、无刻度、不可见数值的控件，行为由浏览器原生支持。
-
min和max必须显式设置，否则默认为 0–100，但很多旧版 Safari 会忽略未设min的情况 -
value决定初始位置；不设时取min（不是中间值） - 必须加
name属性，否则表单提交时该字段不会被包含 - 不支持
required—— 因为 range 输入永远有值（哪怕没交互过）
step 属性的实际影响与常见误区
step 控制滑块可停靠的粒度，但它不只是“步长”——它还参与合法性校验和键盘操作逻辑。
- 设为
step="any"允许任意浮点值（如3.14159），但此时valueAsNumber仍返回数字，valueAsDate无效 - 设为
step="0.1"时，用户用方向键调节会按 0.1 递增/减，但鼠标拖拽仍可能产生更细小的中间值（取决于浏览器，Chrome 会四舍五入到 step，Firefox 不一定） - 若
min=0、max=1、step=0.33，合法值只有0、0.33、0.66、0.99——1不在序列中，所以滑块无法真正拉到max
如何让 range 滑块显示当前值或刻度
原生 不提供内置刻度或数值标签，需手动组合 DOM 或用 CSS + JS 模拟。
- 最简方案：在滑块旁放一个只读
元素，并用oninput实时同步 -
的for属性应指向 range 的id，语义正确且部分屏幕阅读器可识别关联 - 不要用
onchange（仅在失去焦点时触发），要用oninput（拖拽中实时响应） - CSS 伪元素（如
::after）无法动态插入value，必须用 JS 更新文本节点
移动端兼容性与触摸体验关键点
iOS Safari 和 Android Chrome 对 range 的触摸支持差异大，尤其在小尺寸设备上容易误触或响应迟钝。
立即学习“前端免费学习笔记（深入）”；
- iOS 15.4+ 才真正支持
touch-action: manipulation优化滑块拖拽；老版本需加-webkit-appearance: none并重写轨道样式，否则默认样式过窄难操作 - Android WebView 中，若父容器有
overflow: hidden，滑块拖拽可能被截断 —— 建议给 range 外层加position: relative并确保足够留白 - 不要依赖
ontouchstart单独监听，oninput在移动端同样生效，且覆盖更全（包括辅助工具调节）
复杂交互（比如带刻度线、双滑块范围选择）建议用成熟库如 noUiSlider 或 ion-range，原生 range 的样式控制力和事件精度有限。
