HTML DOM Input - Range 对象

<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 属性值
纠错
反馈

纠错反馈