【原创】HTML5>meter标签与input(type=range)标签结合制作简易范围指示器

很多时候我们能看到这样的表示范围的优化工具，能给人带来很好的用户体念，今天结合HTML5的两个新标签来制作一个简易的范围提示器，这里用到的两个新标签是meter和input(type=range)，首先来看一下这两个新家伙怎么用吧。

meter定义和用法

meter元素标签用来表示范围已知且可度量的等级标量或分数值，如磁盘使用量比例、关键词匹配程度等。需要注意的是，<meter>不可以用来表示那些没有已知范围的任意值，例如重量、高度，除非已经设定了它们值的范围。<meter>元素共有6个属性：

Value：表示当前标量的实际值；如果不做指定，那么<meter>标签中的第一个数字就会被认为是其当前实际值，例如<meter>2 out of 10</meter>中的"2"；如果标签内没有数字，那么标量的实际值就是0。

Min：当前标量的最小值；如不做指定则为0。

Max：当前标量的最大值；如不做指定则为1；如果指定的最大值小于最小值，那么最小值会被认为是最大值。

Low：当前标量的低值区；必须小于或等于标量的高值区数字；如果低值区数字小于标量最小值，那么它会被认为是最小值。

High：当前标量的高值区。

Optimum：最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区。

Input 类型- range定义
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
您还能够设定对所接受的数字的限定：
实例
<input type="range" name="points" min="1″ max="10″ />
请使用下面的属性来规定对数字类型的限定：
属性值描述
max number 规定允许的最大值
min number 规定允许的最小值
step number 规定合法的数字间隔（如果step="3″，则合法的数是-3,0,3,6 等）

value number 规定默认值

兼容新和浏览器支持度

meter兼容性:

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(×)Firefox 2.0	(√)Chrome 1.0.x	(√)Opera 9.63	(×)Safari 3.1
	(×)IE7	(×)Firefox 3.0	(√)Chrome 2.0.x		(×)Safari 4.0
	(×)IE8	(×)Firefox 3.5
	(×)IE9	(×)Firefox 3.6

input(type=range)兼容性:

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(×)Firefox 2.0	(√)Chrome 1.0.x	(√)Opera 9.63	(√)Safari 3.1
	(×)IE7	(×)Firefox 3.0	(√)Chrome 2.0.x		(√)Safari 4.0
	(×)IE8	(×)Firefox 3.5
	(×)IE9	(×)Firefox 3.6