<input> 元素可以用来创建各种不同类型的表单控件，其中 <input type="range"> 允许用户在指定的范围内选择一个值。
属性
value: 表示滑块的当前值。min: 滑块的最小值。max: 滑块的最大值。step: 滑块值的增量。disabled: 当设置为disabled时，滑块将被禁用。
事件
change: 当滑块的值改变时触发。input: 当用户改变滑块的值时持续触发。
示例代码
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Range Input Example</title>
</head>
<body>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="1">
<span id="volumeValue"></span>
<script>
const volumeInput = document.getElementById('volume');
const volumeValue = document.getElementById('volumeValue');
volumeInput.addEventListener('input', function() {
volumeValue.textContent = volumeInput.value;
});
</script>
</body>
</html>在上面的示例中，我们创建了一个范围输入框，用户可以通过滑动滑块选择音量的值。当用户改变滑块的值时，会实时更新显示当前音量值的 <span> 元素的内容。
这是一个简单的示例，你可以根据需要对 <input type="range"> 元素进行更复杂的样式和功能定制。
| 属性 | 描述 |
|---|---|
| autocomplete | 设置或返回滑块控件的 autocomplete 属性值 |
| autofocus | 设置或返回滑块控件在页面加载后是否自动获取焦点 |
| defaultValue | 设置或返回滑块控件默认的值 |
| disabled | 设置或返回滑块控件是否可用 |
| form | 返回使用滑块控件的表单引用 |
| list | 返回包含了滑块控件的 datalist 引用 |
| max | 设置或返回滑块控件的 max 属性值 |
| min | 设置或返回滑块控件的 min 属性值 |
| name | 设置或返回滑块控件的 name 属性值 |
| step | 设置或返回滑块控件的 step 属性值 |
| type | 返回滑块控件的表单类型 |
| value | 设置或返回滑块控件的 value 属性值 |