是语义化数值输入控件，非装饰组件；必须显式设置 min、max、value（数字字符串格式）、step，并监听 input 事件以保障表单提交、无障碍访问及移动端可用性。
input type="range" 不是装饰性控件，它的行为和语义直接影响表单验证、可访问性与移动端体验。用错属性或忽略边界条件，轻则数值跳变异常，重则在 Safari 或旧版 Android 上完全失效。
min/max/value 必须是数字字符串，不能省略
浏览器会把空 value、非数字 min 或 max 当作 0 处理，但这个“0”不参与表单提交校验，容易导致后端收到意外值。
-
min和max必须显式写出，哪怕都是整数，比如min="0" max="100"，不能只写min=0（缺少引号会触发 HTML 解析错误） -
value必须落在[min, max]闭区间内；超出时，Chrome 会自动截断，Firefox 则可能忽略该值，滑块停在边界 - 如果初始值依赖 JS 动态设置，务必在 DOM 加载完成后赋值：
el.value = "75"，而不是直接改el.setAttribute("value", "75")（后者不触发 UI 更新）
step 属性决定合法值集合，不是视觉精度
step 控制的是“哪些值能被选中”，不是滑块拖动的细腻程度。设成 step="any" 才允许任意浮点值；设成 step="0.5" 就只能取 0、0.5、1、1.5… 即使用户拖得再慢，也跳不到 0.3。
- 默认
step="1"，所以min="0" max="10"实际只有 11 个可选值 -
step="any"在部分安卓 WebView 中支持不佳，建议搭配 JS 校验兜底 - 当
min是小数时，step必须能整除差值，否则最后几个刻度可能无法抵达max—— 例如min="0.1" max="0.9" step="0.2"，最大实际可达值是 0.9，但 0.9 − 0.1 = 0.8，0.8 ÷ 0.2 = 4，所以合法值为 0.1、0.3、0.5、0.7、0.9，没问题；但如果step="0.3"，就会卡在 0.7，到不了 0.9
list + datalist 显示刻度，但仅作提示不约束输入
list 属性关联的 datalist 只影响视觉标记（如 Chrome 会在轨道上打点），**不改变可选值范围**。用户依然可以拖到任意合法位置，包括两个 option 之间。
-
datalist中的option的value必须与input的min/max/step兼容，否则标记位置错乱 -
label属性只在部分浏览器（如 Chrome）显示 tooltip，Safari 完全不渲染，别依赖它传递关键信息 - 若需强制用户只选特定档位（如“低/中/高”），应改用
select或带 JS 的 radio 组，而非range
移动端滑块响应迟滞？检查 touch-action 和 CSS width
在 iOS Safari 和部分安卓浏览器中，input[type="range"] 默认宽度太窄，手指拖动时容易误触其他区域，且没有 touch-action: manipulation 会导致响应延迟。
- 必须设置明确的
width（如width: 100%或width: 300px），否则在 flex 容器里可能坍缩为 0 - 加一行 CSS：
input[type="range"] { touch-action: manipulation; }，能显著改善拖动跟手性 - 避免用
transform: scale()放大滑块——它会放大 hit area 但不放大可交互区域，导致拖动偏移
input type="range" 的真正复杂点不在写法，而在它同时承担了 UI 控件、表单字段、无障碍节点三重角色。漏掉一个 aria-valuetext，屏幕阅读器就念不出当前值；没处理 input 事件而只监听 change，移动端就会丢失实时反馈。这些细节不报错，但一上线就暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
