HTML 使范围栏显示值 - HTML

在HTML中，可以使用范围栏（Range Input）作为表单控件来收集用户输入数据。范围栏允许用户在一定的范围内选择数字值，并可以使用步长来调整值。范围栏的默认界面是滑块（Slider）样式。

范围栏的一个常见需求是在用户修改值时，实时显示所选值的数字。本文将介绍如何使用HTML和JavaScript来实现此功能。

HTML 范围栏

HTML 范围栏使用 <input> 标签来定义，type 属性设置为 range。

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

上面的代码定义了一个范围栏，它的ID是 volume，默认值为50。用户可以在0~100的范围内选择值。由于没有其他设置，范围栏的界面是默认的滑块样式。

JavaScript 显示范围栏值

在JavaScript中，可以通过监听范围栏的 input 事件来实现实时显示所选值的数字。具体来说，我们可以先获取范围栏元素，然后监听其 input 事件。在事件处理函数中获取范围栏当前的值，并将其显示在一个文本元素中。

<label for="volume">音量：</label>
<input type="range" id="volume" value="50"/>
<span id="volumeValue"></span>

<script>
  const range = document.getElementById('volume');
  const value = document.getElementById('volumeValue');
  
  range.addEventListener('input', function() {
    value.innerText = this.value;
  });
</script>

上面的代码中，我们创建了一个 <span> 元素，它的ID是 volumeValue。在事件处理函数中，我们将范围栏的值设置为 value.innerText，这样就可以实时显示所选值的数字了。

以上就是HTML如何使范围栏实时显示值的介绍。通过监听范围栏的 input 事件，并在事件处理函数中获取当前范围栏的值，并将其显示在适当的元素中，我们可以轻松地实现这一功能。