step属性对<progress>元素完全无效，仅适用于<input type="range">；需结合max、JS同步及value校准才能实现精确步进控制。
step属性对
step 属性只作用于 <input type="range">，对 <progress> 元素没有任何效果。直接给 <progress step="5"> 写上 step，浏览器会忽略它——既不校验 value 是否符合步长，也不影响渲染或交互。
真正需要 step 的是 range 滑块，不是 progress 进度条
当你想让用户“以 5% 为单位拖动进度”或“只能选 0、5、10…100 这些整数位置”，必须用 <input type="range"> 并设置 step，再靠 JS 同步到 audio.currentTime 或其他状态。常见误用场景：
- 把
step加在<progress>上，以为能限制 value 取值——实际 value 可设任意浮点数，max 和 value 都是纯数值映射 - 用
<input type="range">但没设step，用户拖出 37.284 这种值，后端解析失败或 UI 显示错乱 - 设了
step="5"却把max="100"和音频 duration（比如 237.6 秒）硬绑定，导致滑块 1 步 = 11.88 秒，失去控制精度
step 值怎么设才合理：看用途，不是看习惯
不要默认写 step="1" 或 step="0.1"。决定步长的关键是使用场景和数据粒度：
- 表单填写进度（百分比）：
max="100"+step="1"最自然，用户看到的是整数百分比 - 音频/视频跳转（时间定位）：
max应设为audio.duration，step="0.1"支持百毫秒级定位；若用step="any"，则必须用 JS 校验并截断（如Math.round(val * 10) / 10） - 上传文件分片进度（整数分片号）：
max="12"（共 12 片）+step="1"，value 就是当前完成的片数 - 移动端触摸操作：
step太小（如"0.01"）易触发非预期中间值，建议不低于"0.1"，再配合input事件里做parseFloat(value).toFixed(1)统一格式
动态更新 step 时的坑：浏览器不响应，得手动重置
运行时修改 input.step 不会自动约束已存在的 value，也不会刷新滑块可选刻度。例如：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
const slider = document.getElementById('my-slider');
slider.step = '5'; // 此时 value=7 仍合法，滑块仍能停在 7
要真正生效，必须同步调整 value 到新步长的最近有效值：
- 先读当前
slider.value - 用
Math.round(parseFloat(slider.value) / parseFloat(slider.step)) * parseFloat(slider.step)对齐 - 再赋回
slider.value = alignedValue - 最后触发一次
slider.dispatchEvent(new Event('input'))确保监听器响应
这个过程容易漏掉校准步骤，结果就是“改了 step 却发现滑块还是能拖到任意位置”。
