什么是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添加几个样式来覆盖所有浏览器的默认外观。
我们创建了一个在所有浏览器中不可见或无样式的range input。现在我们可以添加基本样式。
给滑块添加样式
那个被点击或者沿轨道拖动的小组件叫作滑块。它可以像常规的HTML元素一样被添加样式。
新闻热点
疑难解答
