什么是Input Range
Input Range 對象是 HTML5 新增的。
Input Range 對象表示使用 type="range" 屬性的 HTML <input> 元素。
注意： Internet Explorer 9及更早IE版本不支持使用 type="range" 屬性的 HTML <input> 元素。.
訪問 Input Range 對象
你可以使用 getElementById() 函數(shù)來訪問使用 type="range" 屬性的 <input> 元素:
var x = document.getElementById("myRange"); 嘗試一下
提示： 你同樣可以通過表單的元素集合來訪問 Input Range 對象。
創(chuàng)建 Input Range 對象
你可以使用 document.createElement() 方法來創(chuàng)建使用 type="range" 屬性的 <input> 元素：
var x = document.createElement("INPUT");
x.setAttribute("type", "range");
在這篇教程中，我們用基本的range input作為例子：
然后把它變成：
為了簡化生成跨瀏覽器兼容的樣式的過程，我們引進(jìn)LESS。當(dāng)然也有CSS版本。
添加基礎(chǔ)CSS樣式
我們需要給range input添加幾個樣式來覆蓋所有瀏覽器的默認(rèn)外觀。
我們創(chuàng)建了一個在所有瀏覽器中不可見或無樣式的range input?，F(xiàn)在我們可以添加基本樣式。
給滑塊添加樣式
那個被點(diǎn)擊或者沿軌道拖動的小組件叫作滑塊。它可以像常規(guī)的HTML元素一樣被添加樣式。
新聞熱點(diǎn)
疑難解答
圖片精選
