两种方式实现web html slider

最近做一个项目，web页面上要实现slider，经过调研，先后采用了两种方式：

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

实现很简单，

<input type="range" min="10" max="300" value="100" step="10" οnchange="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：表示滑动事件。更多事件和用法请参考官方文档，链接上面已经给出。