HTML | DOM 输入范围类型属性

简介

输入范围类型属性（input type="range"）是HTML5中新增的一种输入类型，它允许用户在一定范围内选择一个值。

通过设置input元素的type属性为range，可以创建一个范围输入控件。它通常用于需要指定数字值的任务，例如选择音量或图像大小。

用法

基本语法

<input type="range" min="0" max="100" step="1">

属性

| 属性 | 描述 | | ------ | ------------------------------------------------------------ | | value | 设置或返回范围控件的值。 | | min | 设置或返回控件的最小值。 | | max | 设置或返回控件的最大值。 | | step | 设置或返回控件的步长（每次拖动时值发生的变化）。 | | name | 设置或返回控件的名称。 | | id | 设置或返回控件的id。 | | class | 设置或返回控件的class。 | | style | 设置或返回控件的样式。 | | onchange | 设置或返回当元素失去焦点并修改范围值时的事件。 | | oninput | 设置或返回当元素的值发生改变时的事件。 |

示例

<input type="range" min="0" max="100" step="1" id="myRange" oninput="showValue()">
<p>当前值：<span id="demo"></span></p>

<script>
function showValue() {
  var slider = document.getElementById("myRange");
  var output = document.getElementById("demo");
  output.innerHTML = slider.value;
}
</script>

实现效果

总结

输入范围类型属性允许用户在一定范围内选择一个值，它是HTML5中新增的一种输入类型。 使用范围输入控件时，您可以设置控件的最小值、最大值和步幅。 当值发生变化时，您可以通过JavaScript代码动态获取该值并将其用于您的业务逻辑。