基本用法
要创建一个输入范围，我们只需要简单地在<input>元素中指定type="range"即可：
<input type="range" name="volume" min="0" max="100" step="1">
上面的代码创建了一个名为volume的输入范围，其取值范围从 0 到 100，步长为 1。用户可以通过拖动滑块来选择所需的数值。
属性说明
min：指定输入范围的最小值。max：指定输入范围的最大值。step：指定输入范围的步长，即每次拖动滑块所改变的数值。value：指定输入范围的初始值。disabled：禁用输入范围，使其不可用。
事件处理
输入范围也可以通过 JavaScript 来处理用户的交互。例如，我们可以监听input事件来实时显示用户选择的数值：
<input type="range" name="volume" min="0" max="100" step="1" oninput="updateValue(this.value)">
<p>当前值：<span id="currentValue"></span></p>
<script>
function updateValue(value) {
document.getElementById('currentValue').innerText = value;
}
</script>上面的代码中，当用户拖动滑块时，updateValue函数会将当前值实时更新到页面上。
样式定制
输入范围的样式可以通过 CSS 进行定制。例如，我们可以改变滑块的颜色、大小等样式：
-- -------------------- ---- -------
-------
------------------- -
------ -----
------- -----
----------------- --------
------- -----
-------------- -----
-------- -----
-
----------------------------------------- -
------ -----
------- -----
----------------- --------
-------------- ----
------- --------
-
--------
------ ------------ ------------- ------- --------- ---------在上面的代码中，我们通过 CSS 定制了输入范围的样式，使其更符合我们的设计需求。
总结
通过本文的介绍，我们学习了如何使用type="range"属性来创建输入范围表单元素，并了解了其常用属性和事件处理方式。同时，我们也学习了如何通过 CSS 来定制输入范围的样式。希望本文对你有所帮助！