<p>step属性控制滑块合法取值的粒度，即只允许用户选中min + n × step（n为整数）的值；若(max - min) % step ≠ 0，则step失效，浏览器降级为自由滑动。</p>
滑动条 step 属性到底控制什么
step 不是“让滑块吸附到刻度”，而是限制用户能选中的**合法取值粒度**。浏览器只允许用户拖到或键盘箭头跳到 min + n × step 的位置（n 为整数）。如果 min 是 0、max 是 100、step 是 25，那合法值只有 0、25、50、75、100 —— 滑块会“卡”在这几个点上，不是视觉吸附，是值域强制约束。
为什么设置了 step 还能拖到中间？
常见错误是没设 min 或 max，或者设的值不能被 step 整除。比如：<input type="range" min="0" max="100" step="30">，100 ÷ 30 = 3.33…，最后一段不完整，浏览器会允许滑到 90 之后的任意位置（如 95），因为 95 = 0 + 3×30 + 5，但 5 不满足 step=30 的步进规则 —— 实际上此时浏览器已降级为自由滑动。必须确保 (max - min) % step === 0，否则 step 失效。
-
min和max都要显式声明 - 验证：用 JS 算一下
(max - min) % step，结果必须是 0 - 小数场景注意浮点误差，比如
step="0.1"容易出错，优先用整数放大（如min="0" max="100" step="1"表示 0.0–1.0，值除以 100 使用）
step="any" 和 step 数值的区别
step="any" 表示**不限制步长**，滑块可停在任意浮点位置（取决于浏览器精度），但值仍是连续的；而指定数值（如 step="5"）是硬性离散约束。两者都影响 input 事件触发的值，但 step="any" 下你无法靠它实现“吸附”——吸附逻辑得自己写。
- 想真吸附（比如拖到 23 自动跳到 25），必须监听
input或change事件，手动四舍五入或取最近合法值 -
step="any"常用于需要高精度输入又不想限定粒度的场景（如音频时间轴） - 移动端 Safari 对
step支持较弱，尤其小数，建议 fallback 到 JS 校验
如何用 JS 补足“视觉吸附”效果
原生 step 只管值，不管滑块 UI 是否对齐。若需拖动过程中就“咔哒”卡位，得监听 input 并重置 value：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
const slider = document.querySelector('input[type="range"]');
slider.addEventListener('input', () => {
const step = parseFloat(slider.step);
const min = parseFloat(slider.min);
// 向上取最近合法值（避免负数偏移）
const snapped = Math.round((slider.value - min) / step) * step + min;
slider.value = String(snapped);
});注意：直接赋值 slider.value 会触发新一轮 input，所以要用 Math.round 而非 Math.floor，否则可能震荡；且该写法在快速拖拽时有轻微延迟感，真实项目中建议加防抖或仅在 change 时校验。
真正难的不是写这十几行代码，而是意识到：浏览器的 step 是值约束协议，不是 UI 动画指令。想让滑块“看起来卡住”，得自己接管它的行为。
