HTML | DOM Input Range step 属性

输入范围（input type="range"）是HTML5中的新的表单元素，它允许用户从范围内选择一个值。step 属性定义了在范围中的每个步骤的量。

样例代码

<input type="range" min="1" max="100" step="5">

上面的代码创建一个范围输入框，范围是从 1 到 100，每次增加 5。

属性值

• 必须是一个正数
• 默认值是 1
• 如果 step="1"，则每次增加/减少 1
• 如果 step="0.1"，则每次增加/减少 0.1
• 如果 step="0"，则只允许选择 min、max和默认值

用途

step 属性最常用于控制范围的增量。例如:

<input type="range" min="0" max="10" step="2">

将会创建一个范围输入框，范围是从 0 到 10，每次增加 2，因此允许用户选择 0、2、4、6、8 或 10。

注意事项

• step 属性不会自动舍入所选值。例如，如果 step="0.1"，输入 1.23456789 将会被接受，但是值将会完全如此保留，用于计算。
• 如果范围的 max 和 min 值之间不能被 step 正好整除，则可能会发生意想不到的结果。例如，以下代码可能会创建范围元素，其中第一个选项为 10，第二个为 12，而不是所期望的 11。

<input type="range" min="10" max="20" step="2">

总结

step 属性可以控制范围的增量，使用户能够更精确地选择他们想要的值。然而，对于复杂的范围，应该仔细考虑 step 属性，以确保用户总是能够选择他们想要的值。