在HTML5中，又新增许多新<input>控件类型，比较实用的一个就是<input type="range">，以滑竿的方式来调整value值，在这以前需要通过模拟才能够实现，下面就通过代码实例介绍一下它的作用。
代码如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
" utf-8"
>
<
title
>蚂蚁部落</
title
>
<
style
type
=
"text/css"
>
#demo{
width:50px;
height:50px;
background:red;
}
</
style
>
<
script
type
=
"text/javascript"
>
window.onload=function(){
var demo=document.getElementById("demo");
var range=document.getElementById("range");
range.onmousemove=function(){
demo.style.width=this.value+"px";
}
}
</
script
>
</
head
>
<
body
>
<
div
id
=
"demo"
></
div
>
<
input
type
=
"range"
step
=
"1"
max
=
"500"
min
=
"10"
value
=
"50"
id
=
"range"
/>
</
body
>
</
html
>
|
以上代码可以平滑的拖动空间按钮来调整div的宽度，大家可以特别注意下此空间的几个常用属性，step用来规定，拖动数据变动的最小跨度，max规定最大值，min规定最小值。还有一个要特别注意的点是:实现此平滑拖动效果最好用onmousemove事件，在各个浏览器表现都是一致的，使用onchange事件在最新的谷歌和火狐浏览器中并不是平滑的。
原文发布时间为：2017-3-7
本文作者：admin
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
原文链接：<input type="range">标签用法实例代码
