JavaScript 参考手册 目录

HTML DOM Input - Range 对象

<input> 元素可以用来创建各种不同类型的表单控件,其中 <input type="range"> 允许用户在指定的范围内选择一个值。

属性

  • value: 表示滑块的当前值。
  • min: 滑块的最小值。
  • max: 滑块的最大值。
  • step: 滑块值的增量。
  • disabled: 当设置为 disabled 时,滑块将被禁用。

事件

  • change: 当滑块的值改变时触发。
  • input: 当用户改变滑块的值时持续触发。

示例代码

--------- -----
----- ----------
------
    ----- ----------------
    ----- ---------------------------- ------------------
    ----- --------------- ---------------------------- -------------------
    ------------ ----- ---------------
-------
------
    ------ ----------------------------
    ------ ------------ ----------- ------------- ------- --------- ---------
    ----- ------------------------

    --------
        ----- ----------- - ----------------------------------
        ----- ----------- - ---------------------------------------

        ------------------------------------- ---------- -
            ----------------------- - ------------------
        ---
    ---------
-------
-------

在上面的示例中,我们创建了一个范围输入框,用户可以通过滑动滑块选择音量的值。当用户改变滑块的值时,会实时更新显示当前音量值的 <span> 元素的内容。

这是一个简单的示例,你可以根据需要对 <input type="range"> 元素进行更复杂的样式和功能定制。


上一篇:HTML 对象 <input> - number
下一篇:HTML 对象 <input> - password