HTML5 – range

HTML5提供了range控件，可以用于滑块和可调整范围的输入字段。有了range, 我们可以轻松为用户提供一种滑动或调整值的方式，它为Web开发提供了更多的灵活性和交互性。

基本用法

HTML代码

<label for="volume">音量：</label>
<input type="range" id="volume" value="50" min="0" max="100">

在这个例子中，我们使用
“`“`来创建一个range控件，并设置了它的id, 值(value)的初始值为50，最小值(min)为0，最大值(max)为100。

属性

下面我们详细介绍这些属性：

value
这个属性定义了range控件的值。它可以是一个整数，也可以是小数或浮点数。
```
<label for="temperature">温度：</label>
<input type="range" id="temperature" value="26.5" min="10" max="35">
```
在这个例子中，range控件的值是26.5，最小值为10，最大值为35。
min

这个属性定义了range控件的最小值。
```
<label for="age">年龄：</label>
<input type="range" id="age" value="18" min="0" max="100">
```
在这个例子中，range控件的最小值为0，最大值为100。
max

这个属性定义了range控件的最大值。
```
<label for="speed">速度：</label>
<input type="range" id="speed" value="5" min="0" max="10">
```
在这个例子中，range控件的最小值为0，最大值为10。
step

这个属性定义了range控件的步长。步长决定了range控件的滑块滑动的距离和值的变化程度。
```
<label for="price">价格：</label>
<input type="range" id="price" value="100" min="0" max="1000" step="100">
```
在这个例子中，range控件的步长为100，最小值为0，最大值为1000。

list

这个属性关联一个datalist元素，可以提供一个选择列表给用户。

<label for="rating">评分：</label>
<input type="range" id="rating" value="3.5" min="0" max="5" step="0.1" list="ratingList">

<datalist id="ratingList">
<option value="0">不及格</option>
<option value="1">及格</option>
<option value="2">中等</option>
<option value="3">良好</option>
<option value="4">优秀</option>
<option value="5">卓越</option>
</datalist>

其他属性

autocomplete
autofocus
disabled
form
name
readonly
required
tabindex

事件

oninput事件

当用户拖动滑块或者使用键盘调整值时，oninput事件就会触发。我们可以使用oninput事件来实时更新一个显示元素（如一个计数器或一个进度条）。

<label for="quantity">数量：</label>
<input type="range" id="quantity" value="1" min="1" max="10">

<p>已选择的数量： <span id="quantitySelected"></span></p>

<script>
  const quantity = document.getElementById('quantity')
  const quantitySelected = document.getElementById('quantitySelected')

 quantity.oninput = function() {
    quantitySelected.textContent = this.value;
  }
</script>

在这个例子中，我们创建了一个range控件和一个元素来显示已选择的数量。在JavaScript代码中，我们定义了一个事件处理程序来监听range控件的oninput事件，当用户拖动滑块或者使用键盘调整值时，事件处理程序更新显示元素的值。

CSS样式

range控件的外观可以通过CSS进行自定义。如果我们想要修改range控件的外观，我们可以使用::-webkit-slider-thumb伪元素。

CSS样式代码

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  background-color: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #4CAF50;
  cursor: pointer;
  box-shadow: 0 0 5px #4CAF50;
}

input[type="range"]:hover {
  opacity: 1;
}

input[type="range"]:active {
  opacity: 1;
}

在这个例子中，我们定义了一个CSS样式，自定义了range控件的外观。我们将默认的滑块样式去掉，使用自定义的滑块样式代替，并添加了一些效果，使得range控件更加美观、易用。