深度挖掘，Html5的 Range 滑動刻度的坑，相容全平台，將任性進行到底！

標籤：

最近2天一直在弄一個滑動的刻度效果，由於項目是基於Web App開發的，於是考慮到 移動端和pc端 的相容性問題，考慮的比較多，嘗試採用 Html5的Range 來做，目前已經相容 pc端和移動端！

 

實現成果如下：

 

Html5 Range，缺點：

----------------------------------------------------------------------------------------------

1: 目前測試了（Chrome瀏覽器 和 iphone6 ）滑動不是即時的變化刻度，不知道為啥，其他平台都可以

2: 第一次改變srcElement.value後的值，不會生效，得主動出發一次。

 

Html5 Range，優點：

----------------------------------------------------------------------------------------------

1：可以做的特別漂亮，不用考慮即時顯示的問題

2：滑動不用去做了，Range控制項原生支援，其他看了渲染後的Range其實就是一個Shadow DOM（虛擬Dom樹），這個也是基於Shaow DOM的組件式開發，感覺棒棒的。

3：Range支援很多個人化的參數設定（初始值：value, 最小值：min, 最大值：max）

 

Range 源碼，

----------------------------------------------------------------------------------------------

 

過程中遇到的問題如下：

----------------------------------------------------------------------------------------------

    問題來了，怎樣去點擊控制Range的值，並且讓它滑動？

    答案：在Range的change事件裡改變 srcElement.value，就可以了。 

 

Range美化的一篇文章分享：

----------------------------------------------------------------------------------------------

http://www.w3cplus.com/html5/styling-cross-browser-compatible-range-inputs-css.html

 

深度挖掘，Html5的 Range 滑動刻度的坑，相容全平台，將任性進行到底！