HTML5的step属性仅支持等距线性增量，无法实现对数、指数等非线性步进；需用JavaScript配合range或number控件，通过映射数组或输入校验模拟非线性行为，并辅以无障碍优化。
HTML5 的 step 属性本身只支持**等距线性增量**，无法直接实现非线性（如对数、指数、自定义间隔）的步进。所谓“非线性精确增量”，需通过 JavaScript 配合原生控件（如 <input type="range"> 或 <input type="number">）来模拟，而非仅靠 step 属性完成。
理解 step 属性的限制
step 是一个数值（或 "any"），它规定的是输入值在最小值（min）和最大值（max）之间**等差递增的固定步长**。例如：
<input type="range" min="0" max="100" step="5"> → 只能取 0, 5, 10, ..., 100；<input type="number" step="0.1"> → 支持 0.0, 0.1, 0.2, ...（线性小数步进）。
它不支持：10 → 20 → 50 → 100 → 200 这类跳跃式、非等差的序列。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
用 range 滑块 + 映射数组实现自定义非线性步进
核心思路：滑块本身仍用线性 step="1"（即整数索引），但将它的值映射到预定义的非线性数值数组中。
立即学习“前端免费学习笔记（深入）”；
- 定义一个升序数组，如
const values = [1, 2, 5, 10, 20, 50, 100]; - 滑块
min="0"、max="6"（数组长度减 1）、step="1" - 监听
input事件，用当前滑块值作为索引读取对应数值：const actualValue = values[slider.valueAsNumber]; - 同步更新显示文本或隐藏的数字框（如
<output>或<input type="number">）
用 number 输入框 + 输入拦截实现受控非线性校验
若需用户直接输入，可用 input[type="number"] 配合 input 和 change 事件做实时校正：
- 设置
step="any"允许任意输入，但不依赖它做逻辑 - 监听
input事件，获取当前输入值parseFloat(e.target.value) - 查找最接近的合法值（如使用
findClosest()函数在预设数组中搜索） - 自动修正并重设
e.target.value，同时触发change通知业务逻辑 - 可配合
pattern和title提示格式（但注意 pattern 对 number 类型无效，建议改用type="text"+ 数字验证）
补充：视觉与无障碍优化建议
非线性控件易造成用户困惑，需额外设计提升可用性：
- 在滑块下方用
<datalist>标注关键刻度点（虽不强制对齐，但有提示作用） - 同步显示当前选中值的语义化标签（如 “50 ms”、“×10 增益”），而不仅是数字
- 为
<input type="range">添加aria-valuetext动态描述当前意义（如aria-valuetext="中等延迟"） - 确保键盘操作（←→/PageUp/PageDown）也触发相同映射逻辑，保持一致性
