- <input type="range"> 允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。
- 通常使用滑块或拨号控件而不是像 number 输入类型这样的文本输入框来表示。 由于这种小部件不精确，因此除非控件的确切值不重要，否则通常不应使用它。
|
属性 |
说明 |
|
value |
包含一个 DOMString 该属性包含所选数字的字符串表示形式。 该值绝不能为空字符串 (""). 默认值介于指定的最小值和最大值之间，除非最大值实际上小于最小值，在这种情况下，默认值设置 min 属性的值。确定默认值的算法是 |
|
max |
允许值范围内的最大值。 如果输入到元素中的value超过此值，则元素将无法通过约束验证 。 如果 max 属性的值不是数字，则元素没有最大值 此值必须大于或等于 min 属性的值 |
|
min |
允许值范围内的最小值。 如果元素的value 小于此值，则该元素将无法通过 约束验证。如果为min 指定的值不是有效数字，则输入没有最小值。 该值必须小于或等于 max 属性的值 |
|
step |
range 输入的默认步进值为 1，除非步进基数不是整数，否则仅允许输入整数；否则，默认值为 1 |
|
list |
list 属性的值是位于同一文档中的 <datalist> 元素的 id。 <datalist> 提供了一个预定义值的列表，以向用户建议此输入。列表中与类型不兼容的任何值都不包含在建议的选项中。提供的值是建议，而不是要求：用户可以从此预定义列表中选择或提供不同的值。 |
示例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
<body> <form> <input type="range" min="-10" max="10"> </form> </body>
</html> |
浏览器运行结果如下：
来自 <https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/range>