input type="range"必须显式设置min、max和step，否则数值行为不可控；未设step时默认为1，若max-min
input type="range" 必须显式设置 min、max 和 step，否则数值行为不可控——不是“能用就行”，而是“不设就埋雷”。
为什么滑块拖到一半就跳变或卡死？
常见现象是：写了 min="0" max="10" 却没设 step，结果滑块只在 0 和 10 之间跳，中间位置点不动；或者设了 min="0" max="0.5" 但 step 没改，默认 step="1"，整个区间只剩一个有效值（0），浏览器静默降级为单点。
-
step不写 =step="1"，和整数无关，只和数值跨度有关 - 若
max - min ，浏览器只保留 <code>min一个可选值 - 想支持小数（如 0.1、0.05），必须显式写
step="0.1"或step="0.05"，不能靠 JS 后续修正 -
step="any"允许任意浮点值，但会禁用键盘方向键微调（Firefox 和 Safari 均如此）
value 初始值被忽略的真正原因
不是浏览器“不认”，而是校验失败后静默 fallback 到 min。比如 min="10" max="20" value="5"，value 超出下界，直接弃用，滑块从 10 开始。
-
value必须是数字字符串，且解析后落在[min, max]闭区间内 - 即使
value="15.0"也合法，但value="15px"或value=""会被忽略 - 服务端渲染时若动态插入 value，务必确保它已按数值范围做过截断（如
Math.min(max, Math.max(min, val))）
移动端拖不动、热区太小怎么办？
iOS Safari 和部分安卓 WebView 默认 thumb 尺寸极小（约 12×12px），手指一划就滑过，根本没法精调。
- 必须重置
-webkit-appearance: none，再手动设height（轨道）和width/height（thumb） - thumb 物理尺寸至少
24px × 24px，transform: scale()在 iOS 上无效 - 加
touch-action: manipulation到input元素上，避免滚动冲突 - 别依赖
::-moz-range-thumb做精细控制——Firefox 对该伪元素支持有限，且不响应cursor: pointer
实时显示值时，为什么 output 标签比 span 更合适？
因为 <output for="id"></output> 是语义化原生方案，自动绑定、无需事件监听、支持无障碍读取，且不会因 JS 失效而断裂。
- 只需写
<input id="vol" type="range" min="0" max="100" value="50">+<output for="vol"></output> - 浏览器自动同步
input.value到output.textContent，连 JS 都不用写 - 如果要加单位（如 “50%”），得用 JS 监听
input事件并手动更新，此时output仍比span更利于屏幕阅读器识别
最常被忽略的一点：所有属性值（min、max、value、step）虽写在 HTML 中带引号，但浏览器按数字字面量解析——所以引号内不能有空格、单位或字母，哪怕只是多一个空格，parseFloat 就会返回 NaN。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
