【前端】html5用range型input标签怎么显示数字

HTML5 的 range 类型的 input 标签默认情况下不会显示数字，但是可以通过 CSS 来改变样式，使其显示数字。以下是一个简单的例子，演示如何显示 range 输入框的数字值：

HTML:

<input type="range" min="0" max="100" value="50" id="slider" />
<span id="slider-value"></span>

CSS:

#slider-value {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -30px;
  font-size: 20px;
}

JavaScript:

const slider = document.getElementById('slider');
const sliderValue = document.getElementById('slider-value');
 
slider.addEventListener('input', function() {
  sliderValue.textContent = this.value;
});
 
sliderValue.textContent = slider.value;

在这个例子中，input 标签用于创建一个滑块控件，而 <span> 标签用于显示当前的数值。通过 JavaScript 代码，我们为 input 事件添加了一个监听器，当滑块的值改变时，会更新显示的数字。初始化时也会显示初始值。