step 属性需与 min、max、value 对齐才生效，否则浏览器静默修正 value 导致交互异常；根本原因是 value 不满足 value === min + n × step；应手动计算合规值并用 stepUp/stepDown 避免浮点误差。
step 属性不是“设了就自动生效”的开关，它必须和 min、max、value 三者对齐才能正常工作；否则浏览器会静默修正 value，导致拖不动、点不准、方向键跳变异常。
为什么滑块拖不动或点不精准
根本原因常是初始 value 不满足 value === min + n × step（n 为整数）。比如：min="0"、step="0.25"，但写了 value="1.1"——这个值不在合法序列里，Chrome 和 Safari 会悄悄把它改成 1.0 或 1.25，DOM 看不出变化，但交互已卡死。
- 初始化时务必手动计算：用
Math.round((targetValue - min) / step) * step + min得到合规value - 测试时直接按键盘方向键：←/→ 应每次跳
step，若跳得不对，先查value是否合规，再查step值本身 -
type="range"的step不影响渲染精度，哪怕设成0.001，用户也感知不到像素级差异，别盲目压低
step="0.1" 为什么总报“值必须为 0.1 的倍数”
这不是校验逻辑错了，而是浮点精度问题真实存在：0.1 在二进制中无法精确表示，多个 0.1 累加后可能变成 0.30000000000000004，浏览器比对时发现用户输入的 "0.3" 不匹配它内部生成的合法序列，就触发 validity.stepMismatch。
- 金额类场景强烈建议换算单位：用“分”代替“元”，设
min="0"、step="1"、value="199"表示 1.99 元 - 必须用小数时，统一小数位数：
min="0.00"、max="10.00"、step="0.01"，避免混用整数与小数 - 不要依赖
step="any"绕过问题——它不解决精度，反而让表单验证失效，且 Safari 15.4 之前不支持
动态改 step 后交互失灵怎么办
只改 el.step = "0.5" 是无效的。浏览器不会自动重算合法值集合，旧 value 很可能已越界，导致拖动卡顿、松手跳变、方向键无响应。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 必须同步重置
value：el.value = Math.round(parseFloat(el.value) / 0.5) * 0.5，再.toFixed(1)格式化显示 - 优先用
el.setAttribute('step', '0.5')，部分浏览器对属性变更响应更稳定 - 快速连续切换时，加
requestAnimationFrame延迟重置，避免状态残留 - 改完立即调用
el.checkValidity()，必要时el.reportValidity()主动提示
实现 ± 按钮时最容易踩的坑
别用 parseFloat(val) + 0.25 这类 JS 计算——0.1 + 0.2 === 0.30000000000000004 是铁律，会把按钮行为搞乱。
- 优先调用原生方法：
inputEl.stepUp(1)和inputEl.stepDown(1)，它们严格按step属性执行，不走 JS 浮点运算 - 按钮点击后，建议再做一次格式化：
inputEl.value = parseFloat(inputEl.value).toFixed(2)，防止界面显示超长小数 - 键盘方向键微调（含 Shift + ↑ 十倍步进）由
step自动控制，无需额外监听
最易被忽略的是：step 只约束交互时的“跳变点”，不保证视觉或行为上的“顺滑”。真要高精度时间轴（如音频进度），得靠 min/max 与实际时长映射 + input 事件实时截断 + requestAnimationFrame 同步，光调 step 值没用。
