如何在HTML中显示type="range"类型input的当前值？

其实很简单，结合HTML和JavaScript就能轻松搞定，我给你两种实用的实现方式：

方式一：实时更新显示值 #

首先在HTML里加一个用来展示值的元素（比如<span>），然后用JavaScript监听滑块的input事件，拖动时实时把值同步到这个元素里。

完整代码示例： #

<!-- 你的滑块控件 -->
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<!-- 新增的显示容器 -->
<p>当前值: <span id="valueDisplay">50</span></p>

<script>
// 获取滑块和显示元素
const slider = document.getElementById('myRange');
const valueDisplay = document.getElementById('valueDisplay');

// 监听滑块拖动事件，实时更新值
slider.addEventListener('input', function() {
  valueDisplay.textContent = this.value;
});
</script>

这种方式的优势是响应即时，用户拖动滑块的过程中，值会跟着同步变化，体验很流畅。

方式二：停止拖动时更新（可选） #

如果你不需要实时更新，只想在用户松开滑块或点击滑块固定位置时更新值，可以监听change事件：

slider.addEventListener('change', function() {
  valueDisplay.textContent = this.value;
});

这种场景下，只有当用户结束拖动操作时，显示的值才会更新。

额外优化：让显示更美观（可选） #

你可以用CSS给滑块和显示元素做些样式调整，让整体更协调：

.slider {
  width: 220px;
  margin-right: 12px;
}
#valueDisplay {
  font-weight: bold;
  color: #2d3748;
  font-size: 1.1em;
}

这样就能完美解决看不到滑块当前值的问题啦！

内容的提问来源于stack exchange，提问作者Peter Harris