HTML5新控件 - 滑动条

2015-09-26 发布：hangge 阅读：7048

滑动条 range 控件同 number 控件类似，它可以表示整数或者小数值。同时也支持 min 和 max 属性，用于设置允许的范围。

不同的是，number 控件是一个文本框形式，而 range 控件使用滑动条的形式。和音量调节器很像，通过拖动滑块来选择值。适用于那些对输入数据不要特别精确地方使用。

（注意：range 控件浏览器不会告诉你最终设定了多大的值，如果想要显示这个值，可以使用 js 响应滑动条的变化事件（onchange 事件），然后在旁边把值显示出来。）

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

附：让 range 控件拖动时会实时触发事件

如果给滑动条添加个 onchange 事件会发现，这个只有在拖动完毕后（即鼠标松开）才会触发。

有时我们想要在拖动的过程中也能实时响应事件，那么可以给滑动条添加个 oninput 事件（onchange 事件可以不要了）。

<input id="range" type="range" min="0" max="5" value="0" oninput="change()"/>

<script type="text/javascript">
  function change() {
    var value = document.getElementById("range").value;
    console.log(value);
  }
</script>

将滑块从左向右拖动，可以看到控制台实时打印出当前的值。