step属性控制type="range"或type="number"的数值增减最小单位，以min为起点、step为公差生成合法值序列；默认值为1，设为"any"则取消限制；其值必须符合min+step×n规则，否则浏览器自动校正。
HTML5 的 input 元素中，step 属性是控制数字滑块（type="range"）或数字输入框（type="number"）每次增减最小单位的关键参数。它决定了用户拖动滑块或点击上下箭头时，数值变化的“精度”。
step 属性的基本作用
该属性指定合法的数值间隔。浏览器会强制输入值只能落在以 min 为起点、以 step 为公差的等差数列上（即：min, min+step, min+2×step, …）。若未设置 step，默认值为 1；设为 step="any" 则取消限制，允许任意精度浮点数（但需配合 min/max 合理使用）。
常见 step 值的写法与效果
-
整数步长：如
step="5"，滑块只允许取值 0、5、10、15…（假设min="0"） -
小数步长：如
step="0.1"，支持一位小数（0.0、0.1、0.2…），适合调节音量、透明度等 -
科学记数法或分数步长：不推荐直接写
step="0.05"，而应写成step="0.05"（浏览器可识别），但避免step="1/20"这类无效写法 - step="any"：解除步长约束，但需注意表单验证可能失效，建议搭配 JavaScript 校验逻辑
与 min、max 和 value 的协同规则
step 不是孤立生效的——它的起始基准是 min 值，而非 0。例如：
-
<input type="range" min="10" max="20" step="3">合法值为：10、13、16、19（22 超出 max，排除） -
<input type="range" min="0.5" max="2.0" step="0.25">合法值为：0.5、0.75、1.0、1.25、1.5、1.75、2.0 - 若
value初始值不满足 step 规则（如min="0" step="0.1" value="0.15"），浏览器会自动向下取整到最近合法值（0.1）或忽略该值（行为因浏览器略有差异）
实际开发中的注意事项
- 避免使用浮点数精度陷阱：如
step="0.1"在二进制浮点运算中可能产生微小误差，显示为0.30000000000000004。可通过toFixed()或服务端截断处理 - 滑块 UI 不会自动标注刻度，如需可视化步长点，需用 CSS + JS 手动绘制标尺或监听
input事件实时格式化显示 - 移动端 Safari 对
step支持良好，但旧版 Android 浏览器可能存在兼容性问题，建议降级方案（如禁用原生滑块，改用自定义组件） - 表单提交前，可用
checkValidity()方法检测当前值是否符合 step 规则，返回false表示非法（如用户手动输入了非步长倍数的值）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
