最近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