深度挖掘，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