step 属性仅对 有效，用于约束滑块取值精度； 和 为只读展示元素，忽略 step 属性，其值需通过 javascript 手动归整并同步。
step 属性在 <input type="range"> 中才有效
HTML 的 step 属性本身不控制“仪表盘指针”——浏览器没有原生的仪表盘（gauge）元素。<meter></meter> 和 <progress></progress> 是只读展示组件，不支持 step；只有 <input type="range"> 才真正响应 step，用于约束用户拖动时的取值精度。
如果你看到的“仪表盘”是用 <input type="range"> 模拟的（比如配合 CSS 旋转指针），那 step 控制的就是滑块本身的数值步进，间接影响指针落点。
-
step="1"：允许取整数，如 0、1、2… -
step="0.5"：允许 0、0.5、1、1.5… -
step="any"：禁用步进限制（但实际仍受浏览器输入精度和事件触发频率影响）
为什么给 <meter></meter> 加 step 没反应
<meter></meter> 是纯展示标签，没有交互能力，其 value 属性只能通过 JavaScript 修改。写 <meter value="35" min="0" max="100" step="5"></meter> 中的 step 完全被忽略——HTML 规范未定义该属性对 <meter></meter> 的作用，浏览器也不会报错或警告。
常见误操作是把 range 的逻辑套到 meter 上，结果发现拖不动、改不了、step 像没写一样。
- 检查元素类型：用
document.querySelector('meter').tagName确认是不是真用了<meter></meter> - 动态更新 meter 值必须靠 JS：
meterEl.value = Math.round(newVal / 5) * 5才能模拟“5 为步进” - 若需交互，必须搭配一个隐藏的
<input type="range">，再用 JS 同步它的value到<meter></meter>
用 range + JS 实现带步进的指针仪表盘
典型做法是：视觉上用 <meter></meter> 或 Canvas 渲染指针，底层用 <input type="range"> 处理输入，并通过 step 约束合法值，再映射到指针角度。
例如仪表范围 0–360° 对应数值 0–100，要求每 10 单位一跳：
<input type="range" min="0" max="100" step="10" id="dial"><meter id="gauge" value="0" min="0" max="100"></meter>
监听 change 事件时，input 的 valueAsNumber 已自动对齐到 step，无需额外取整：
const dial = document.getElementById('dial');
const gauge = document.getElementById('gauge');
dial.addEventListener('change', () => {
const val = dial.valueAsNumber; // 一定是 0, 10, 20...100
gauge.value = val;
// 若用 Canvas/rotate 指针，这里算角度：val * 3.6 度
});
- 不要在事件里再写
Math.round(val / 10) * 10——step已保证输入合规 - 移动端要注意
input事件触发频率低，change更可靠 - 若需键盘操作（←→↑↓），得监听
keydown并手动按step增减value
step 值不是万能的，边界和精度要手动兜底
step 只约束用户输入行为，不阻止 JS 直接赋非法值。比如 dial.value = "42" 会让 range 显示在 42，即使 step="10" —— 浏览器不会自动修正，也不会触发 input 事件。
更隐蔽的问题是浮点误差：设 min="0" max="1" step="0.1"，理论上应有 11 个点，但 0.3 + 0.1 在 JS 中可能得 0.39999999999999997，导致 valueAsNumber 不严格对齐。
- 关键逻辑处建议显式归一化：
const safeVal = parseFloat((Math.round(val / step) * step).toFixed(10)) - 用
valueAsNumber而非value字符串，避免字符串解析误差 - 服务端或核心逻辑不能信任前端
step限制，必须二次校验
真正难的不是写 step="5"，而是当 UI 需要“看起来像机械表盘，咔嗒咔嗒跳动”，而浏览器 range 的滑动是平滑的——这时候得放弃原生 range，自己实现 drag + snap 逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
