HTML HTML5 input type range显示range值

在本文中，我们将介绍如何使用HTML5的input type range来显示range的值。

阅读更多：HTML 教程

什么是input type range？

HTML5的input元素有多种type属性可以选择，其中之一是range。range类型的input元素用于在给定的范围内选择一个数值。它允许用户通过滑块或拖动手柄来选择一个数值。range类型的input元素通常与一个range的最小值和最大值一起使用。

使用range type input

要使用range类型的input元素，我们需要设置它的最小值、最大值和当前值。下面是一个例子：

<input type="range" min="0" max="100" value="50">

在这个例子中，我们将range的最小值设置为0，最大值设置为100，并将当前值设置为50。这样，当用户拖动滑块时，它的值将在0到100之间变化。

显示range的值

默认情况下，range类型的input元素并不会显示它的值。但我们可以通过JavaScript来实时显示range的值。下面是一个使用JavaScript来显示range值的例子：

<input type="range" min="0" max="100" value="50" id="myRange">
<p id="demo"></p>

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

range.oninput = function() {
  output.innerHTML = this.value;
}
</script>

在这个例子中，我们给input元素设置了一个唯一的id属性，以便我们可以通过JavaScript来获取该元素。我们还给一个p元素设置了一个id属性，用于显示range的值。

JavaScript代码部分创建了一个函数，当range的值发生变化时，它将更新显示range值的p元素的内容。通过设置output.innerHTML = range.value，我们将range元素的值赋给了p元素的innerHTML。

以上的例子中，当用户拖动滑块时，range的值将实时显示在p元素中。

更改range的value对应的显示样式

我们还可以根据range的值来更改它对应的显示样式。例如，我们可以通过改变滑块的颜色来反映range值的大小。下面是一个例子：

<input type="range" min="0" max="100" value="50" id="myRange">
<style>
  #myRange::-webkit-slider-thumb {
    background-color: red;
  }

  #myRange::-moz-range-thumb {
    background-color: red;
  }

  #myRange::-ms-thumb {
    background-color: red;
  }
</style>

<script>
var range = document.getElementById("myRange");
range.oninput = function() {
  var value = (this.value - this.min) / (this.max - this.min) * 100;
  this.style.background = 'linear-gradient(to right, red 0%, red ' + value + '%, #ddd ' + value + '%, #ddd 100%)';
}
</script>

在这个例子中，我们通过设置不同浏览器的样式选择器，来改变滑块的颜色。当range的值发生变化时，JavaScript代码会计算出range值的百分比，并通过设置background样式来动态改变滑块的颜色。