原生 需搭配 实现数值实时显示，并监听 input 事件（非 change）以确保拖拽、键盘操作全程响应；step 和事件兼容性在各浏览器中存在差异。
<input type="range"> 能快速做出滑动条，但默认行为离“可用的数值范围选择器”差得远——没显示当前值、无法限制步长、移动端拖拽不跟手、键盘操作缺失，甚至有些浏览器连 value 都不会实时更新。
为什么直接写 <input type="range"> 常常失效
原生 range 输入框在不同浏览器中表现不一致：Safari 旧版本不触发 input 事件（只认 change），Chrome 在触摸屏上可能延迟响应，Firefox 对 step 的解析更严格。更关键的是，它不自动同步显示数值，用户根本不知道拖到哪了。
- 没绑定
output元素时，value变化完全不可见 -
step="0.1"在 Safari 中可能被忽略，实际按整数步进 - 用 JS 直接读
input.value在拖拽中途可能取到旧值（尤其未监听对的事件） - 键盘方向键默认只支持 1 单位步进，无法适配小数或自定义粒度
必须搭配 <output></output> 实时显示当前值
仅靠 CSS 或 JS 手动更新文本容易不同步，<output></output> 是语义化且原生联动的解法，配合 for 属性自动绑定：
<input type="range" id="price" min="0" max="1000" step="10"> <output for="price"></output>
这样浏览器会自动把 input 的 value 同步进 output 的 textContent。注意：for 的值必须和 input 的 id 完全一致，大小写敏感；output 必须在 DOM 中存在，不能靠 JS 动态插入后再指望自动绑定。
监听 input 事件而非 change 才能实时响应
change 只在用户松开鼠标/手指后触发一次，input 则在每次值变化时都触发（包括键盘操作、拖拽过程）。但要注意兼容性：
- 所有现代浏览器（含 iOS Safari 13.4+、Android Chrome）都支持
input事件用于range - 如果需兼容极老 Safari（input +
change双事件，用event.type === 'input'判断是否实时 - 别在事件里反复读写
input.value，避免触发重排；直接用event.target.valueAsNumber获取数字类型值，省去parseFloat()
用 step 和 min/max 控制精度时的真实限制
step 不是“最小移动单位”，而是“合法取值必须满足：(value − min) % step === 0”。这意味着：
-
min="0" max="100" step="3"允许的值是 0, 3, 6, ..., 99 —— 100 不会被选中（因为 (100−0)%3≠0） -
step="any"允许任意浮点数，但部分浏览器（如旧版 Firefox）会忽略，仍按整数处理 - 想实现“0.01 精度但显示两位小数”，设
step="0.01"并在output中用toFixed(2)格式化，别依赖step自动补零 - 移动端 touch 操作下，
step小于 1 时滑动可能“跳变”，建议step ≥ 0.1保证手感
真正难的不是画出滑块，而是让每一次拖动、点击、键盘输入都精确落到你定义的数学格子上，同时不卡顿、不丢值、不误导用户——这些细节藏在 step 的模运算逻辑里、藏在事件流的选择中、也藏在 output 和 id 的拼写里。
