- 默认slider的安装启用
- 为slider自定义风格
- 修改配置选项
- 创建一个垂直的slider
- 设置最大最小值，和默认值
- 启用多个 手柄 和 范围
- slider内置的回调事件
- slider的方法
这个简单的控件，由两个主要的元素组成，手柄，也称拇指。背景，也称为轨道。
1 安装启用一个slider
1 <div id="mySlider">2 </div>3 4 $(function(){ 5 $("#mySlider").slider(); 6 });
该控件需要以下库文件的支持：
- jquery-ui-x.x.x.custom.css
- jquery-x.x.x.js
- jquery.ui.core.js
- jquery.ui.widget.js
- jquery.ui.mouse.js
- jquery.ui.slider.js
也需要主题图片的支持。
可以用鼠标或者上下左右键对齐操作。
2 自定义样式
推荐使用 ThemeRoller 方法定制主题。但是为了完全地改变控件的样貌和感觉，我们可以简单地创建我们自己的主题文件。
1 <div class="background"> 2 <div id="mySlider"> 3 </div> 4 </div> 5 <script> 6 $(function(){ 7 $("#mySlider").slider(); 8 }); 9 </script>10 <style>11 .background {12 height:50px; width:217px; padding:36px 0 0 24px;13 background:url(img/slider_outerbg.gif) no-repeat;14 }15 #mySlider {16 width:184px; height:23px; border:none; position:relative;17 left:4px; top:4px;18 background:url(img/slider_bg.gif) no-repeat;19 }20 #mySlider .ui-slider-handle {21 width:14px; height:30px; top:-4px;22 background:url(img/slider_handle.gif) no-repeat;23 }24 </style>
3 配置选项
垂直slider，多handles和步长都能够给在slider初始化的时候，给控件 方法传递对象来配置。
| Option | Default value | Used to… |
| animate | false | 当track被点击时，为handle启用平滑动画 |
| disabled | false | 当控件初始化时禁用它 |
| max | 100 | 设置slider的最大值 |
| min | 0 | 设置slider的最小值 |
| orientation | auto | 设置slider thumb移动的轴。接受字符串值vertical或horizontal |
| range | false | 创建一个能设置样式的range元素 |
| step | 1 | 设置步长，最大值必须能被这个数整除 |
| value | 0 | 设置初始化时的值 |
| values | null | 接受一个值数组。每个提供的整数会成为一个handle的值 |
3.1 创建垂直slider
1 var sliderOpts={ 2 orientation:"vertical" 3 };
如果没有设置高度，则track默认100 xp 。
3.2 最大最小值
默认地，最小值是0，最大值是100.
1 var sliderOpts = { 2 min: -50, 3 max: 50 4 };
因为value的默认值是0，所以初始化后，handle在中间的位置。
3.3 步长
1 var sliderOpts = { 2 step: 25 3 };
3.4 slider动画
slider控件内置的动画，能够在track被点击时，使handle平滑地移动到新位置。动画效果默认被禁用。
1 var sliderOpts={ 2 step:10, 3 animate:true 4 };
如果步长超过1，并且启用的动画效果，则thumb会滑动到离track被点击的最近步长位置。
3.5 设置slider的value
1 var sliderOpts = { 2 value: 50 3 }
3.6 使用多个handles
1 var sliderOpts = { 2 values: [25, 75] 3 };
3.7 范围
1 var sliderOpts = { 2 values: [25, 75], 3 range: true 4 };
当有着多个handle时，我们能设置range选项为true，这回在两个handles之间添加一个范围样式元素。
当只有一个单一handle时，我们可以设置这个handle到 max 或 min 的范围。
1 var sliderOpts = { 2 range: "min" 3 };
此时为handle到最小值之间的范围。
4 使用事件API
| Event | Fired when… |
| change | handle停止移动，并且value发生改变 |
| slide | handle移动 |
| start | 开始移动时 |
| stop | 停止移动时 |
1 <style> 2 #mySlider{margin:60px auto 0;} 3 #tip{ 4 position:absolute;display:inline;padding:5px 0; 5 width:50px;text-align:center;font:bold 11px Verdana; 6 } 7 </style> 8 $(function(){ 9 var sliderOpts={ 10 start:function(){ 11 $("#tip").fadeOut(function(){ 12 $(this).remove(); 13 }); 14 }, 15 change:function(e,ui){ 16 $("<div id='tip'></div>").text(ui.value+"%").css("left",e.pageX-100).appendTo("#mySlider") 17 } 18 }; 19 $("#mySlider").slider(sliderOpts); 20 }); 21
在start回调函数中，我们选择到tip元素，如果它存在。并且使用jQuery fadeOut()方法将其淡出。一旦从view中hidden，它就会从页面中被移除。
change回调函数会在每次slider handle 的value发生变化时执行。当函数被调用，我们创建一个tool tip并且将其附加到slider。它会显示在slider handle 的正上方，并且得到一些框架classnames。
我们从回调函数会传递ui对象，它包含一些有用的信息，value就是从它获得。事件按一下顺序会被触发：
- start
- slide
- stop
- change
当我们同时使用stop 和 change回调，change回调会覆盖stop回调。
对所有的组件而言，都可以使用jQuery bind()方法，如sliderstart。
5 slider的方法
当控件被初始化后，我们可以以代码的方式控制它。
| Method | Used to… |
| value | 给一个单一的slider handle设置一个新值。它会将handle自动移动到track上新的位置。这个方法接受一个单一的整数参数 |
| values | 当启用多个handles时，设置指定的handle移动到新的值。这个方法接受两个参数，index和新值 |
所有组件都有的 destroy ,disable ,enable, option widget 都适用。
value 和 values 方法可以set 和 get 一个单一或多个handles的 value。当然，我们也可以使用option 方法。
1 <button type="button" id="setMax">Set to max value</button> 2 <div id="mySlider"> 3 </div> 4 $(function(){ 5 $("#mySlider").slider(); 6 $("#setMax").click(function(){ 7 var maxVal=$("#mySlider").slider("option","max"); 8 $("#mySlider").slider("value",maxVal); 9 }); 10 });
1 <button type="button" id="low" class="preset">Preset 1(low)</button> 2 <button type="button" id="hight" class="preset">Preset 2(hight)</button> 3 <div id="mySlider"> 4 </div> 5 $(function(){ 6 var sliderOpts={ 7 values:[25,75] 8 }; 9 $("#mySlider").slider(sliderOpts); 10 $(".preset").click(function(){ 11 if(this.id==="low"){ 12 $("#mySlider").slider("values",0,0); 13 $("#mySlider").slider("values",1,25); 14 }else{ 15 $("#mySlider").slider("values",0,75); 16 $("#mySlider").slider("values",1,100); 17 } 18 19 }); 20 });
注意，当前jquery版本中，不能通过链式的使用两个方法，修改不同的个体。因为这个方法返回一个新值，并且不是一个jQuery 独享。
6 实际的使用
HTML 5 的<audio>元素，会自动地添加用户播放，暂停，调整音量的控制。
1 <audio id="audio" src="img/1.mp3">Your browser does not support the <code>audio</code>element.</audio> 2 <div id="volume"></div> 3 $(function(){ 4 var audio=$("#audio")[0], 5 sliderOpts={ 6 value:5, 7 min:0, 8 max:10, 9 orientation:"vertical", 10 change:function(){ 11 var vol=$(this).slider("value")/10; 12 audio.volume=vol; 13 } 14 }; 15 audio.volume=0.5; 16 audio.play(); 17 $("#volume").slider(sliderOpts); 18 });
7 颜色slider
1 <style> 2 #container { 3 width:426px; height:146px; padding:20px 20px 0; 4 position:relative; font-size:11px; background:#eee; 5 } 6 #container label { 7 float:left; text-align:right; margin:0 30px 26px 0; 8 clear:left; 9 }10 .ui-slider { width:240px; float:left;}11 .ui-slider-handle { width:15px; height:27px;}12 #colorBox {13 width:104px; height:94px; float:right; margin:-83px 0 0 0;14 background:#fff;15 }16 #container #outputLabel {17 float:right; margin:-14px 34px 0 0;18 }19 #output {20 width:100px; text-align:center; float:right; clear:both;21 margin-top:-17px;22 }23 </style>24 <div id="container" class="ui-widget ui-corner-all ui-widget-content ui-helper-clearfix">25 <label>R:</label>26 <div id="rSlider"></div><br>27 <label>G:</label>28 <div id="gSlider"></div><br>29 <label>G:</label>30 <div id="bSlider"></div>31 <div id="colorBox" class="ui-corner-all ui-widget-content">32 </div>33 <input id="output" type="text" value="rgb(255,255,255)">34 <label for="output" id="outputLabel">Color value:</label>35 36 </div>37 38 $(function(){ 39 var sliderOpts={ 40 min:0, 41 max:255, 42 slide:function(){ 43 var r=$("#rSlider").slider("value"), 44 g=$("#gSlider").slider("value"), 45 b=$("#bSlider").slider("value"); 46 var rgbString=["rgb(",r,",",g,",",b,")"].join(""); 47 $("#colorBox").css({ 48 backgroundColor:rgbString 49 }); 50 $("#output").val(rgbString); 51 } 52 }; 53 $("#rSlider,#gSlider,#bSlider").slider(sliderOpts); 54 });