<input type="range">

在HTML中，当将input元素的type属性设定为range时，其允许用户通过一个滑动条来选定数值的输入范围。

<input type="range">定义格式

其常用的定义格式如下：

type属性用于指定input元素的类型为range；

id属性用于标识控件，以便客户端脚本可获取到该控件；

name属性给出控件的名称，客户端使用这个名称可以获取到该控件，在表单提交后，服务器端脚本可以通过名称获取到该控件的值。

value属性给出控件的默认值；

min属性用于给出范围的最小值；

max属性用于给出范围的最大值。

以上代码在谷歌浏览器和Edge浏览器中的显示效果如下图所示：

从上面的图可以看出，该控件在谷歌浏览器和Edge浏览器中的显示形式相同，只是颜色不一样而已。

如果浏览器不支持该控件，则该控件转换为<input type="text">文本输入控件。

<input type="range">的用途

<input type="range">在html中用于设置某个量在特定范围中的取值。如在播放器中用于调节音量的大小，调节图片的亮度，对比度等。下面这个例子用于设置颜色的取值。

<label for="rv">R:</label>
<input type="range" id="rv" name="rv" value="30" min="0" max="255" onchange="changeColor();">
<label for="gv">G:</label>
<input type="range" id="gv" name="gv" value="110" min="0" max="255" onchange="changeColor();">
<label for="bv">B:</label>
<input type="range" id="bv" name="bv" value="255" min="0" max="255" onchange="changeColor(); ">

<div id="vr" style="text-align:center;width:400px;height:120px;display:block;color:rgb(30,110,255);">
 <p>爱我中华</p>
</div>

changeColor()的脚本内容如下：

<script>
 function changeColor(){
  var r=document.getElementById("rv").value;
  var g=document.getElementById("gv").value;
  var b=document.getElementById("bv").value;
  var cstr = "rgb(" + r + ", " + g + ", " + b + ")";
  document.getElementById("vr").style.color=cstr;
}
</script>

其效果如下图所示：