原生 <input type="range"> 是唯一语义正确、键盘可操作、无障碍友好的方案，必须显式设 min/max，用 valueAsNumber 读值、input 事件实时响应、change 事件提交终值，并手动重绘伪元素以兼容各浏览器。
怎么用 <input type="range"> 实现基础滑块
原生 <input type="range"> 默认长得丑、控制粒度粗、样式难改，但它是语义正确、键盘可操作、无障碍友好的唯一标准方案。别绕开它去手写拖拽逻辑——那会丢掉 arrow 键支持、home/end 跳转、屏幕阅读器识别这些关键能力。
基础写法就一行：
<input type="range" min="0" max="100" value="50">必须显式写
min 和 max，否则默认是 0–100，但很多场景（比如音量 0–1、不透明度 0–1）需要小数或非整数范围，这时得配合 JS 处理值映射。
-
value必须是字符串或数字，但 DOM 属性读取时始终返回字符串，input.valueAsNumber更安全 - 没设
value时，初始值取min（不是 0），容易误以为“没值就是 0” - 移动端 Safari 对
step支持不稳定，设step="any"也不代表真能滑任意精度，底层仍受硬件采样限制
为什么直接改 appearance 不生效
Chrome/Firefox/Edge 可以用 -webkit-appearance: none 或 appearance: none 清除默认样式，但 Safari 在 iOS 15.4 之前完全忽略 appearance，且清除后轨道和滑块变成不可见——不是“美化失败”，是“被清空了”。必须手动重绘轨道和 thumb。
关键点：thumb 是独立伪元素，轨道分 ::before（已填充部分）和 ::after（未填充部分），但只有 WebKit 内核支持 ::-webkit-slider-runnable-track 这种写法，Firefox 用 ::track，标准还没统一。
- 给
input[type="range"]设宽高只影响 thumb，不影响轨道长度；轨道宽度由父容器决定 -
thumb伪元素不能设display: block，否则在 Safari 中消失 - 用
background: linear-gradient()做渐变轨道时，Firefox 会把渐变拉伸到整个轨道，Chrome 则按实际填充比例渲染，行为不一致
input 和 change 事件的区别在哪
用户拖动时，input 事件每移动一个像素（或 step）就触发一次；change 只在松手或失焦时触发一次。如果做实时预览（比如调节亮度），绑 input；如果只是提交最终值（比如表单保存），用 change 更省资源。
立即学习“前端免费学习笔记（深入）”；
注意：移动端没有“松手”概念，iOS 上 change 会在手指离开屏幕时触发，但 Android 某些 WebView 可能延迟到 blur 后，所以别依赖 change 做即时反馈。
- 监听
input时，频繁触发可能卡顿，建议加requestAnimationFrame节流 -
event.target.valueAsNumber比parseInt(event.target.value)更准，尤其当step="0.1"时不会因浮点误差出错 - 别在事件里直接修改
input.value，会导致拖拽跳动；如需约束范围，改完再设回，但要防死循环
兼容老浏览器的底线方案
IE10+ 支持 range，但 IE 的 thumb 样式无法覆盖，且不支持 input 事件实时响应（只有 change）。如果项目还要支持 IE，要么降级为 number 输入框 + 按钮增减，要么用 polyfill（比如 nouislider），但 polyfill 无法继承原生 form 提交行为，还得手动同步值。
真正麻烦的是安卓 4.x 的 UC 浏览器，它把 range 渲染成下拉选择器，且不触发任何事件。检测方式很简单：
const isBrokenRange = 'ontouchstart' in window && !('max' in document.createElement('input'));
- 不要用
@supports (appearance: none)判断是否支持美化，它在 Safari 中返回 true 却实际不生效 - 用
CSS.supports('selector', 'input[type="range"]::-webkit-slider-thumb')更准，但仅限现代浏览器 - 如果设计允许，优先用
min=0 max=100整数范围，避开小数精度和兼容性双坑
滑块最深的坑不在样式，而在值映射逻辑和事件时机。很多人花两小时调 thumb 大小，结果上线后发现用户拖到 0.7 时显示 0.6999999999999999——那是没用 valueAsNumber 或没对 step 做 Math.round。细节藏在值处理里，不在 CSS 里。
