step属性本身不提升体验，用错反而破坏体验；它仅在与min、max、value严格对齐且避开浮点陷阱时，才能确保数字/滑块输入可预期、可校验、可控制。

直接说结论：step 属性本身不提升体验，用错反而破坏体验；它只在与 min、max、value 严格对齐，且避开浮点陷阱的前提下，才能让数字/滑块输入“可预期、可校验、可控制”。

为什么 step="0.1" 点击箭头却跳 1？

这不是浏览器 bug，是 IEEE 754 浮点表示缺陷导致的静默降级。旧版 Chrome 曾把 step="0.1" 解析为 step="1"，Safari 也可能跳过小数步进逻辑。

• 根本原因：0.1 在二进制中无法精确存储，部分浏览器解析失败后 fallback 到默认值 1
• 现象：上下箭头点击一次跳整数，input.stepUp(1) 返回 NaN 或意外值
• 验证方式：打印 el.step —— 如果输出是 "1" 而不是 "0.1"，说明已被重写
• 解法：统一用两位小数单位，比如金额场景改用 min="0"、step="1"、value="199"（代表 1.99 元），显示时再除以 100

range 滑块拖动后 value 不对齐 step 怎么办？

type="range" 的视觉拖动是连续的，但最终取值强制对齐 min + n × step。用户松手瞬间浏览器会自动“吸附”到最近合法点，这个过程不可见，容易造成困惑。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 常见问题：滑块停在 2.3，但 input.value 是 "2.3000000000000003"（浮点误差）或 "2.2999999999999998"
• 必须配合 input 事件做实时规整：

  rangeInput.addEventListener('input', () => {
    const val = parseFloat(rangeInput.value);
    const aligned = Math.round((val - parseFloat(rangeInput.min)) / parseFloat(rangeInput.step)) * parseFloat(rangeInput.step) + parseFloat(rangeInput.min);
    rangeInput.value = aligned.toFixed(2); // 根据 step 精度定小数位
  });

• 别依赖 output 标签自动同步 —— 它只读取原始 value 字符串，不处理对齐

动态切换 step 后 spinner 失灵或跳变

修改 step 属性不会触发浏览器重算合法值集合，旧 value 极可能已非法，导致箭头点击无响应、拖动卡死、松手跳到边界值。

立即学习“前端免费学习笔记（深入）”；

• 错误做法：input.step = "0.25" 或 input.setAttribute("step", "0.25") 后直接不管
• 正确流程：

  input.setAttribute("step", "0.25");
  const min = parseFloat(input.min);
  const current = parseFloat(input.value);
  const aligned = min + Math.round((current - min) / 0.25) * 0.25;
  input.value = aligned.toFixed(2);
  input.checkValidity(); // 主动触发校验
  

• 连续切换时加 requestAnimationFrame 延迟重置，避免状态冲突
• ± 按钮务必用 input.stepUp(1)/input.stepDown(1)，不要手动加减浮点数

最易被忽略的一点：所有 step 行为都基于字符串属性值解析，而非 JS 数值运算。哪怕 DOM 上看着是 step="0.1"，浏览器内部可能已转成近似值。真要高精度，别碰 type="number" —— 改用 type="text" + 自定义校验 + 字符串提交，才是可控路径。