HTML5 input 类型 range
<input> range 类型的元素允许用户指定一个数值,该数值必须不小于给定值,并且不得大于另一个给定值。但是,精确值并不重要。通常使用滑块或拨号控件而不是像 number 输入类型这样的文本输入框来表示。
实例
<!DOCTYPE html><html><body><p>根据浏览器支持:<br>输入类型 "range" 可显示为滑动控件。</p><form action="/example/html/action_page.aspx" method="get">Points:<input type="range" name="points" min="0" max="10"><input type="submit"></form><p><b>注释:</b>IE9 及早期版本不支持 type="range"。</p></body></html>
浏览器支持
表格中的数字注明了完全支持该选择器的首个浏览器版本。
| 类型 | |||||
|---|---|---|---|---|---|
| range | 4 | 10 | 23 | 3.1 | 11 |
定义与用法
<input type="range"> 用于应该包含一定范围内的值的输入字段。
根据浏览器支持,输入字段能够显示为滑块控件。
验证方式
没有可用的模式验证。 但是,执行以下形式的自动验证:
- 如果将 value 设置为无法转换为有效浮点数的值,则验证将失败,因为输入正遭受错误的输入。
- 该值不得小于 min. 默认值为0。
- 该值将不大于 max. 默认值为100。
- 该值将是 step. 预设值为1。
其他属性
除了所有 <input> 元素共享的属性之外,范围输入还提供以下属性:
| 属性 | 描述 |
|---|---|
| list | <datalist>元素的ID,其中包含可选的预定义选项 |
| max | 最大允许值 |
| min | 最小允许值 |
| step | 步进间隔,用于用户界面和验证目的 |