用原生input type=range 写一个滑块，兼容各大浏览器

属性	描述
max	设置或返回滑块控件最大值
min	设置或返回滑块控件最小值
step	设置或返回每次拖动滑块控件时的递增量
value	设置或返回滑块控件的value值
defaultValue	设置或返回滑块控件的默认值
autofocus	设置或返回滑块控件在页面加载后是否应自动获取焦点

先看谷歌浏览器:

览器

用法很简单，如下所示：

火狐浏览器：

除了火狐的样式需要另外重写一套css，其他的基本不用。

		/* 火狐 内背景色 */
		input[type=range]::-moz-range-track {
			height: 4px;
      background: rgb(229, 229, 229);
		}
		/* 火狐 外背景色 */
		input[type=range]::-moz-range-progress {
			background: #767676;
			height: 4px;    
			border-radius: 10px;
		}

 全部代码如下: