兩種方式實現web html slider

最近做一個專案，web頁面上要實現slider，經過調研，先後採用了兩種方式：

1.用html type = “range”的方式，

實現很簡單，

<input type="range" min="10" max="300" value="100" step="10" onchange="showValue(this.value)" style="">

這樣就行了，在頁面上接收滑動塊的值，只需要在程式碼裡這樣做：

function showValue(newValue){
           //to do:接收newValue的值
}

很簡單，但是有個缺點就是該滑動條在IE瀏覽器下不相容，顯示是個輸入框，而在chrome，firefox，safari下都是好的。

為了相容IE，採用了另外一套方法，採用了Jquery的UI庫。

 

2.JQuery UI實現

該方法可以參考：

http://api.jqueryui.com/slider/#entry-examples

主流瀏覽器是都支援了，但是要支援移動端上的touch support,還得參考：

http://touchpunch.furf.com/

下面給出具體實現：

<link href="themes/default/css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="./publics/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="./publics/js/jquery-ui.min.js"></script>
<script src="./publics/js/jquery.ui.touch-punch.min.js"></script>

以上相關js和css是必須的。接下來就很簡單了。

<div  id="slider">

然後在程式碼裡：

$("#slider").slider({
                slide: function( event, ui ) {
                // ui.value is 0-100
                                    }
 });

slide：表示滑動事件。更多事件和用法請參考官方文件，連結上面已經給出。