HTML HTML5 输入类型范围显示范围值

在本文中，我们将介绍HTML5的输入类型范围，并解释如何显示范围的值。

阅读更多：HTML 教程

什么是HTML5输入类型范围？

HTML5引入了一些新的输入类型，其中包括“range”类型。输入类型“range”用于创建一个滑动条，用户可以通过拖动滑块来选择一个范围内的值。

HTML5输入类型范围的基本语法

要使用HTML5的输入类型“range”，需要使用<input>标签，并设置type属性为“range”。以下是该标签的基本语法：

<input type="range" />

默认情况下，输入范围的最小值为0，最大值为100，步长为1。

显示HTML5输入类型范围的范围值

要显示范围的值，可以使用JavaScript来获取滑块的值，并将其显示在网页上。

首先，我们需要为<input>元素添加一个id属性，以便能够在JavaScript中引用它。例如：

<input type="range" id="myRange" />

然后，可以使用JavaScript的addEventListener()方法来监听滑块数值的变化，并在滑块数值改变时更新文本内容。

以下是一个示例，展示了如何实现这个功能：

<!DOCTYPE html>
<html>
<body>

<h2>HTML5 输入类型范围显示范围值</h2>

<input type="range" id="myRange" />

<p>当前的值是: <span id="value"></span></p>

<script>
var range = document.getElementById("myRange");
var value = document.getElementById("value");

range.addEventListener("input", function() {
    value.innerHTML = range.value;
});
</script>

</body>
</html>

在这个示例中，我们首先通过document.getElementById()方法获取<input>元素和包含值的<span>元素。

然后，我们使用addEventListener()方法来监听input事件。每当滑块的值发生变化时，input事件被触发。

在事件处理程序中，我们通过range.value获取滑块的值，并将其赋值给value.innerHTML，以实现即时更新。

自定义HTML5输入类型范围的最小值、最大值和步长

HTML5的输入类型范围还允许我们自定义最小值、最大值和步长。

要自定义最小值和最大值，可以使用min和max属性。要自定义步长，可以使用step属性。

以下是一个示例，展示了如何自定义这些值：

<!DOCTYPE html>
<html>
<body>

<h2>HTML5 输入类型范围自定义最小值、最大值和步长</h2>

<input type="range" id="myRange" min="0" max="10" step="0.5" />

<p>当前的值是: <span id="value"></span></p>

<script>
var range = document.getElementById("myRange");
var value = document.getElementById("value");

range.addEventListener("input", function() {
    value.innerHTML = range.value;
});
</script>

</body>
</html>