必须显式设置min、max、value才能可靠使用range输入框，否则初始值和范围不可控；需用input事件实时监听、number()转换值；关联label和output保障可访问性；定制样式成本高，复杂场景建议自实现。
直接写 <input type="range"> 能渲染滑块，但不设 min、max 和 value 就等于没配——浏览器可能渲染出来，但初始值不可靠、拖动范围不确定、表单提交值混乱。
必须显式设置 min、max、value 才能可靠工作
只写 <input type="range"> 会触发浏览器默认行为：Chrome 默认 min="0" max="100" value="50"，Safari 可能忽略未设 value 的情况，导致初始值为空或取 min。这不是兼容性问题，是规范缺失导致的行为漂移。
-
min和max必须为数字字符串（如"0"、"100"），不能带单位或空格 -
value必须落在 [min,max] 区间内，否则浏览器自动修正（比如value="200"+max="100"→ 实际取100） - 推荐统一用字符串写法：
min="0"max="100"value="25"，避免 HTML 解析时隐式转换歧义
监听 input 事件才能拿到拖动中的实时值
用 change 事件只能在松手后取一次值，用户拖到一半停住，UI 就卡住不动。音量、亮度这类需要预览的场景，必须用 input 事件。
-
event.target.value永远是字符串，参与计算前得用Number()或parseFloat()转换 - 别用行内
oninput，不利于复用和测试；优先用addEventListener('input', handler) - 移动端触摸拖动也会触发
input，频率高但无性能瓶颈，一般不用防抖
关联 label 和 output 才算真正可用
仅靠视觉对齐文字和滑块，对屏幕阅读器无效。可访问性不是加分项，是基础要求。
- 用
<label for="id"></label>+<input id="id">绑定，点击文字也能激活控件 - 数值反馈优先用
<output for="id"></output>，语义明确且支持无障碍读取；不要只用<span></span> - 移动端点击热区小，建议加
style="width: 100%"或 CSS 扩大容器，避免误操作
样式定制成本高，别硬刚原生伪元素
WebKit、Firefox、旧 Edge 各自用不同伪元素控制轨道和滑块柄，CSS 属性支持也不一致。试图“统一”样式往往改一个崩一片。
- Chrome/Edge 必须加
-webkit-appearance: none才能让::-webkit-slider-thumb生效 - Firefox 的
::-moz-range-thumb不支持border-radius，圆角得靠background-image模拟 - 真正跨浏览器一致的方案是放弃原生
input[type="range"]，用<div> + <code>mousedown/touchstart自实现——尤其当设计要求严格时最易被忽略的点：step 值引发的浮点误差。比如
min="0"max="1"step="0.01"，实际拖动中可能出现0.29999999999999996。解决方案不是修 JS，而是把步进转成整数——设min="0"max="100"step="1"，读值时除以 100。
