HTML input range 数值范围选择器

HTML中的<input>标签用于创建用户输入的表单控件，如文本框、复选框、单选按钮等。range类型是<input>的一个特定类型，用于创建一个数值范围选择器，用户可以通过拖动滑块在设定的最小值和最大值之间选择一个数值。下面是一个简单的HTML range 输入类型的教程：

基本用法

<!DOCTYPE html>
<html>
<head>
    <title>Range Input 示例</title>
</head>
<body>

<form>
  <label for="myRange">选择一个数值:</label>
  <input type="range" id="myRange" min="1" max="100">
  <p>当前值: <span id="demo"></span></p>
</form>

<script>
// 添加JavaScript以实时显示滑块的值
document.getElementById("myRange").oninput = function() {
  document.getElementById("demo").textContent = this.value;
}
</script>

</body>
</html>

属性解释

type="range"：定义输入框为范围选择器。
id="myRange"：给输入框分配一个唯一的ID，以便于通过JavaScript操作它。
min="1"：设置滑块的最小值。
max="100"：设置滑块的最大值。

可选属性

step：定义滑块每次移动时的增值或减值，默认为1。例如，step="2"意味着滑块只能在偶数上停止。
value：设置滑块的初始值。如果未设置，默认为最小值。
list：与<datalist>元素一起使用，为滑块提供预定义的选项列表。虽然这不是range输入类型的典型用法，但技术上是可行的。

CSS样式

你还可以使用CSS来美化滑块的外观，例如：

input[type="range"] {
  -webkit-appearance: none; /* 针对Webkit内核 */
  width: 100%;
  background-color: #ddd;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background-color: #4CAF50;
  cursor: pointer;
}

这段CSS代码会改变滑块的背景颜色和滑块拇指（即用户可拖动的部分）的样式。

JavaScript交互

如示例代码中所示，你可以通过JavaScript监听oninput事件来获取滑块的当前值，并根据需要执行其他操作，比如更新页面上的文本或触发其他功能。

这就是关于HTML <input type="range"> 的基本使用教程。希望这对你有所帮助！

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏