使用CSS来扩展增强Input Range的示例

什么是Input Range

Input Range 对象是 HTML5 新增的。
Input Range 对象表示使用 type="range" 属性的 HTML <input> 元素。

注意： Internet Explorer 9及更早IE版本不支持使用 type="range" 属性的 HTML <input> 元素。.

访问 Input Range 对象

你可以使用 getElementById() 函数来访问使用 type="range" 属性的 <input> 元素:

var x = document.getElementById("myRange"); 尝试一下
提示： 你同样可以通过表单的元素集合来访问 Input Range 对象。

创建 Input Range 对象

你可以使用 document.createElement() 方法来创建使用 type="range" 属性的 <input> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "range");

在这篇教程中，我们用基本的range input作为例子：

然后把它变成：

为了简化生成跨浏览器兼容的样式的过程，我们引进LESS。当然也有CSS版本。
添加基础CSS样式

我们需要给range input添加几个样式来覆盖所有浏览器的默认外观。
 

1. input[type=range] {   
2.   -webkit-appearance: none; /* 隐藏滑块，以便自定义滑块样式 */  
3.   width: 100%; /* Firefox下所需 */  
4. }   
5.     
6. input[type=range]::-webkit-slider-thumb {   
7.   -webkit-appearance: none;   
8. }   
9.     
10. input[type=range]:focus {   
11.   outline: none; /* 去掉默认蓝色边框 */  
12. }   
13.     
14. input[type=range]::-ms-track {   
15.   width: 100%;   
16.   cursor: pointer;   
17.   background: transparent; /* 隐藏滑块，以便自定义滑块样式 */  
18.   border-color: transparent;   
19.   color: transparent;   
20. }  

我们创建了一个在所有浏览器中不可见或无样式的range input。现在我们可以添加基本样式。
给滑块添加样式

那个被点击或者沿轨道拖动的小组件叫作滑块。它可以像常规的HTML元素一样被添加样式。
 

1. /* 设定WebKit浏览器下range */  
2. input[type=range]::-webkit-slider-thumb {   
3.   -webkit-appearance: none;   
4.   border: 1px solid #000000;   
5.   height: 36px;   
6.   width: 16px;   
7.   border-radius: 3px;   
8.   background: #ffffff;   
9.   cursor: pointer;   
10.   margin-top: -14px; /* 在Chrome下你需要定义一个margin值, 但在Firefox和IE下，是自动的 */  
11.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* 为滑块增加一个酷炫的特效 */  
12. }   
13.     
14. /* Firefox下 */  
15. input[type=range]::-moz-range-thumb {   
16.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;   
17.   border: 1px solid #000000;   
18.   height: 36px;