什么是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添加幾個樣式來覆蓋所有瀏覽器的默認外觀。
 

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表