min/max必须为纯数字字符串，否则解析失败；step决定精度，不设则默认为1；value须在[min,max]内，否则被忽略；javascript读取时均为字符串，需number()转换。
min 和 max 必须是合法数字字面量，不能靠隐式转换
浏览器解析 min 和 max 时会尝试转成数字，但前提是属性值是纯数字字符串（如 "0"、"100"），不能带单位、空格或字母。写成 min="0px" 或 min=" 50 " 会导致解析失败，部分浏览器可能 fallback 到默认的 0–100 区间。
更关键的是：JavaScript 读取 input.min 或 input.max 时返回的是字符串，直接参与运算（比如 input.min + 1）会出错。稳妥做法是显式用 Number(input.min) 转换。
- ✅ 正确：
<input type="range" min="0" max="100"> - ❌ 危险：
<input type="range" min="0.0" max="1.0" value="0.5">—— 看似支持小数，但没设step时仍按整数步进（step="1"），滑块实际只能停在 0 或 1 - ⚠️ 注意：
min和max值本身不控制精度，只划定边界；精度由step决定
step 属性决定可选值粒度，不设就等于 step="1"
step 不只是“每次拖动跳多少”，它定义了所有合法取值点。不写 step，浏览器自动设为 "1"，哪怕 min="0" max="0.5"，滑块也只会停在 0（因为 1 超出范围，下一个有效点不存在）。
- 要支持任意小数：
step="any"（但 IE11 不支持，会退化为step="1"） - 要限定精度（如价格区间到分）：
step="0.01" - 要跳整数倍（如每 5 年一档）：
step="5" - 别依赖 CSS 缩放来“放大滑块”——触控坐标不变，反而更难精准拖动
value 必须落在 min/max 闭区间内，否则被静默忽略
value 是初始位置，不是“建议值”。如果写的值超出范围，比如 min="10" max="20" value="5"，浏览器不会报错，也不会警告，而是直接忽略 value，让滑块从 min 开始（即 10）。
- 初始化想从最小值开始？必须显式写
value="10"，不能省略 - 动态设置时用 JavaScript：
input.value = "15"（字符串）或input.value = 15（数字，会被自动转字符串） - 读取时始终是字符串：
input.value === "15"，做计算前务必Number(input.value)
移动端拖动卡顿或不准，优先检查 touch-action 和事件绑定
iOS Safari 和 Android Chrome 默认触摸区域小，手指一滑就跳变；安卓上还容易因 JS 同步逻辑过重导致卡顿。
- 加
style="touch-action: manipulation;"提升原生拖动响应速度 - 监听
input事件，不是change—— 后者只在松手后触发一次，无法实时反馈 - 避免在
input回调里做重绘、大量 DOM 操作或同步计算；必要时节流或用requestIdleCallback - 某些 CSS 重置（如全局
input { pointer-events: none; }）会让滑块完全失活，排查时先临时禁用样式
step 和 min/max 的配合关系 —— 它们共同构成一个数学意义上的离散集合，而不仅仅是“视觉范围”。写错一个，整个取值逻辑就偏了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
