range滑块的min和max必须是数字，不能是字符串；浏览器虽会隐式转换，但min="0.5"或min="-10"等格式易出错，且min>max会导致滑块不可拖动、value默认取min，初始value越界会被自动clamp到[min,max]范围内。
range滑块的min和max必须是数字，不能是字符串
HTML <input type="range"> 的 min 和 max 属性只接受数字值，写成 min="0" 看似可行，但本质是字符串——浏览器会隐式转为数字，可一旦写成 min="0.5" 或 min="-10" 就容易因格式不规范出问题。实际生效的是解析后的数值，不是字符串本身。
常见错误现象：min="00"、max="100px"、min=""（空字符串会被当成 0，但语义错误）、或用 JS 动态赋值时忘了转数字：el.min = "50" → 应该是 el.min = 50。
-
min和max必须是有效数字，支持负数、小数（如min="-5.5"） - 若
min > max，滑块将不可拖动，且value默认取min（不是报错，而是静默失效） - 初始
value若不在[min, max]范围内，浏览器会自动 clamp 到边界（比如min="10" max="20" value="5"→ 实际value变成"10"）
step属性决定可选值精度，不设时默认为1
仅靠 min 和 max 无法控制“能选哪些中间值”——这由 step 决定。比如想让滑块在 0–100 之间以 0.1 为步进，必须显式写 step="0.1"；否则即使 min="0" max="100"，用户也只能选整数。
常见错误现象：滑块拖到某个位置后 value 显示为 "39.99999999999999" —— 这通常是因为 step 没设或设成了非整除值（如 min="0" max="1" step="0.3"），导致浮点累积误差。
-
step="any"允许任意精度（依赖浏览器实现，但一般支持小数输入） -
step值必须能被(max - min)整除，否则末端可能无法精确抵达max - 若未指定
step，默认为1，且value始终为字符串形式的整数（哪怕你 JS 改成小数，提交时也会被转回最接近的合法 step 值）
JS动态修改min/max后，value可能越界需手动同步
用 JS 改 input.min 或 input.max 后，当前 value 不会自动调整。如果原 value="80"，然后执行 el.max = 50，滑块视觉上卡死在右端，但 el.value 仍是 "80"，只是 DOM 属性已无效——后续读取 el.valueAsNumber 才会返回 50（clamped 值）。
这意味着：仅靠改 min/max 无法安全约束已有值，必须主动处理。
- 修改
max后，建议立即检查并重置：if (el.valueAsNumber > el.max) el.value = el.max - 避免直接操作
el.value字符串，优先用el.valueAsNumber读写（它自动做类型转换和 clamping） - 监听
input事件时，event.target.valueAsNumber比.value更可靠，尤其配合动态 range
移动端range滑块的min/max受触摸精度影响
在 iOS Safari 或部分安卓浏览器中，min 和 max 虽然定义了数学区间，但滑块的物理可拖动范围有限——尤其是当区间跨度极大（如 min="0" max="1000000"）或 step 极小（如 step="0.001"）时，手指一滑就跳过几十个单位，失去微调能力。
这不是 bug，而是浏览器对 range 输入控件的底层渲染限制：它把整个轨道映射为固定像素长度（通常几百 px），再按比例分配刻度。
- 若需要高精度调节，别硬撑大范围 + 小 step，改用数字输入框 + 按钮增减，或自定义 canvas/pointer 滑块
- 测试时务必在真机上验证，模拟器常表现得过于理想
- 可加 CSS
transform: scale(1.5)稍微放大滑块提升触控面积，但不要依赖它解决根本精度问题
实际用的时候，min 和 max 看似简单，但和 step、JS 同步、移动端适配全搅在一起，稍不注意就出现值不对、拖不动、显示和实际不一致的情况。最稳妥的做法：定死 min/max/step 三者关系，所有 value 更新都走 valueAsNumber，移动端关键场景直接换控件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
