step属性在range中定义合法取值的数学步长，拖动后值自动吸附到最近min+n×step点；需配合min/max、JS同步显示及禁用键盘输入以实现可靠等级选择。
step 属性在 input[type="range"] 中的实际作用
step 不是让滑块“跳格子”的开关，而是定义合法取值的数学步长。比如 step="2" 表示只允许偶数（0、2、4…），step="0.5" 允许 0、0.5、1、1.5…。它本身不改变 UI，但会限制用户拖动后最终提交的值——哪怕你拖到 3.7，松手时浏览器会自动“吸附”到最近的合法值（如 4 或 3.5，取决于实现）。
常见误区是以为设了 step="1" 就能当整数等级选择器用，结果发现滑块仍可停在小数位置，只是提交时被四舍五入。这会导致视觉和值不一致，尤其在移动端更明显。
用 input[type="range"] + step 做等级选择器的关键配置
要让等级选择器真正“离散”且直观，必须配合 min、max 和整数 step，并用 JS 同步显示当前值：
-
min="1"、max="5"、step="1"：限定 1–5 的整数范围 - 添加
value="3"设默认值，避免首次渲染为 0 - 用
oninput实时更新旁边<output></output>或<span></span>，别只靠表单提交时读值 - 禁用键盘输入（
readonly或tabindex="-1"），防止用户手动输非法值
示例片段：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<input type="range" min="1" max="5" step="1" value="3" id="level" oninput="document.getElementById('level-value').textContent = this.value">
<output id="level-value">3</output>
为什么不用 input[type="number"] 配合 step
input[type="number"] 支持 step，但作为等级选择器体验差：
- 移动端弹出数字键盘而非滑块，操作效率低
- 用户可直接输入超范围值（如 99），需额外校验
min/max和change事件 - 箭头按钮步进行为受浏览器影响大，Safari 对
step="1"的响应有时异常 - 缺少视觉反馈，无法一眼看出可选档位分布
除非明确需要键盘输入场景（如后台配置页），否则优先选 range。
兼容性和视觉对齐的坑
step 在所有现代浏览器中都支持，但滑块样式默认不一致：
- Chrome/Firefox 默认滑块轨道是连续的，看不出“5档”；需用 CSS 自定义
::-webkit-slider-runnable-track和::thumb加刻度标记 - IE10+ 支持
step，但不支持<output></output>，得用<span></span>替代 - 若等级语义强（如“初级/中级/高级”），纯数字滑块易误解，建议在滑块下方加文字标签或用
data-属性映射描述
最简健壮做法：用 range + step="1" 控制值域，用 JS 绑定文案映射，不依赖 CSS 刻度——毕竟用户关心的是“选了几级”，不是轨道上有没有小竖线。
