step属性仅控制数值步进，不提供视觉吸附、滑块停靠或刻度线渲染；真吸附需JavaScript监听input事件，用Math.round对齐值并赋值，刻度线须CSS或DOM模拟。
step 属性本身不支持刻度尺吸附效果
step 是 的原生属性，只控制数值步进（如 step="0.5" 表示只能取 0、0.5、1.0…），但它**不触发视觉吸附、不改变滑块停靠行为、也不提供刻度线渲染**。浏览器默认不会“吸”到最近的 step 值——它只是限制可提交/可读取的值范围。用户拖动时仍可能停留在中间位置（尤其在触摸或快速拖拽时），value 也不会自动四舍五入。
实现真吸附必须用 JavaScript 拦截并修正 value
要让滑块“咔哒”停在每个刻度上，得监听 input 或 change 事件，手动把当前 value 对齐到最近的有效步进点。关键逻辑是：用 Math.round((val - min) / step) * step + min 计算对齐值。
- 必须监听
input（不是change），否则拖动过程无实时吸附感 - 注意
min和step都是浮点数时，直接运算易出现精度误差（如0.1 + 0.2 !== 0.3），建议用Number.EPSILON容差比较，或转整数计算再还原 - 修正后需显式赋值
input.value = alignedValue，否则 DOM 不更新
const slider = document.querySelector('input[type="range"]');
slider.addEventListener('input', () => {
const { min, max, step } = slider;
const val = parseFloat(slider.value);
const steps = Math.round((val - min) / step);
// 转整数防浮点误差：先放大再取整再缩小
const aligned = Math.round((val - min) / step) * step + min;
slider.value = Math.min(max, Math.max(min, aligned));
});
刻度线（tick marks）只能靠 CSS 或额外 DOM 模拟
HTML 标准里没有 tick 属性，step 不生成任何视觉刻度。要显示刻度线，有两种主流做法：
- 用 CSS 渐变（
background-image: linear-gradient()）在轨道上画等距短线——简单但无法响应min/step动态变化 - 用 JS 动态生成一组
或伪元素，按(max - min) / step + 1个点计算 left 百分比位置——灵活但需同步更新 - 注意 Safari 对
input[type="range"]的轨道样式支持较弱，::-webkit-slider-runnable-track是主要入口，Firefox 用::moz-range-track
移动端拖拽松手后跳变是常见坑
iOS Safari 和部分安卓 WebView 在手指松开瞬间会触发一次未对齐的 input 事件（值为松手前最后位置），导致吸附失效。解决办法是：
- 加一个
setTimeout(..., 0)延迟执行对齐，确保拿到最终稳定值 - 或监听
pointerup/touchend，在松手后强制校正一次 - 避免在
input中直接修改value后立刻读取，某些旧版 Chrome 会返回旧值
真正可靠的吸附效果，是 step + JS 对齐 + 刻度视觉反馈三者配合的结果。单独依赖 step 只能保证表单提交值合规，不能替代交互体验层的控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
