<input>
元素可以用来创建各种不同类型的表单控件,其中 <input type="range">
允许用户在指定的范围内选择一个值。
属性
value
: 表示滑块的当前值。min
: 滑块的最小值。max
: 滑块的最大值。step
: 滑块值的增量。disabled
: 当设置为disabled
时,滑块将被禁用。
事件
change
: 当滑块的值改变时触发。input
: 当用户改变滑块的值时持续触发。
示例代码
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----- ---------------------------- ------------------ ----- --------------- ---------------------------- ------------------- ------------ ----- --------------- ------- ------ ------ ---------------------------- ------ ------------ ----------- ------------- ------- --------- --------- ----- ------------------------ -------- ----- ----------- - ---------------------------------- ----- ----------- - --------------------------------------- ------------------------------------- ---------- - ----------------------- - ------------------ --- --------- ------- -------展开代码
在上面的示例中,我们创建了一个范围输入框,用户可以通过滑动滑块选择音量的值。当用户改变滑块的值时,会实时更新显示当前音量值的 <span>
元素的内容。
这是一个简单的示例,你可以根据需要对 <input type="range">
元素进行更复杂的样式和功能定制。
属性 | 描述 |
---|---|
autocomplete | 设置或返回滑块控件的 autocomplete 属性值 |
autofocus | 设置或返回滑块控件在页面加载后是否自动获取焦点 |
defaultValue | 设置或返回滑块控件默认的值 |
disabled | 设置或返回滑块控件是否可用 |
form | 返回使用滑块控件的表单引用 |
list | 返回包含了滑块控件的 datalist 引用 |
max | 设置或返回滑块控件的 max 属性值 |
min | 设置或返回滑块控件的 min 属性值 |
name | 设置或返回滑块控件的 name 属性值 |
step | 设置或返回滑块控件的 step 属性值 |
type | 返回滑块控件的表单类型 |
value | 设置或返回滑块控件的 value 属性值 |