本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.8节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
在客户端应用程序中，你有时会发现滑块用做输入数字的元素。滑块的优点是，它比数字输入框更可视化和更直观。
代码清单7-8展示了如何将div改成滑块（slider）微件。
代码清单7-8 将
元素转换为滑块并显示其值 00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Slider</title> 05 <link type="text/css" rel="stylesheet" href= 06 "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css"> 07 <style> 08 #my-slider { 09 width: 250px; 10 } 11 </style> 12 </head> 13 <body> 14 15 <h2>The slider</h2> 16 <div id="my-slider"></div> 17 18 <h2>The slider value</h2> 19 <input type="text" id="slider-value"> 20 21 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 22 <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"> 23 </script> 24 25 <script> 26 // 请将下列代码移至一个外部的.js文件中 27 $(document).ready(function() { 28 29 $('#my-slider').slider({ 30 change: function() { 31 $('#slider-value').attr('value', $(this).slider("value")); 32 } 33 }); 34 35 }); 36 </script> 37 </body> 38 </html>除了初始化滑块，这段代码还实现了一个事件处理程序来监听change事件。所有变化都会反应在传统的输入框上。
7.8.1 为滑块元素添加样式与其他jQuery UI组件相比，滑块组件生成的HTML结构相对较小。在下面的代码段中，一些类加入到div上，以使它看起来像一个滑块，并且添加了一个锚（anchor）元素来显示滑块的把手（handle）。
<div id="my-slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"> <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%; "></a> </div>7.8.2 设置滑块的选项使用滑块微件时，有几个选项可以调整。表7-5为可用于滑块微件的选项列出了代码示例和描述。7.8.3 捕获滑块的事件有几个地方可以为滑块绑定事件处理。下面的代码片段举例说明了在哪些地方可以这么做。
当一个新的滑块组件初始化时进行的事件处理：
$('#my-slider').slider({create: function(event, ui) { // 事件处理 }}); //或 $('#my-slider') .on('slidecreate', function(event, ui) { // 事件处理 }) .slider();当用户开始滑动滑块的把手时进行的事件处理：
$('#my-slider').slider({start: function(event, ui) { // 事件处理 }}); //或 $('#my-slider').slider() .on('slidestart', function(event, ui) { // 事件处理 });当用户继续滑动滑块的把手时进行的事件处理：
$('#my-slider').slider({slide: function(event, ui) { // 事件处理 }}); //或 $('#my-slider').slider() .on('slide', function(event, ui) { // 事件处理 });当滑块的值发生变化时进行的事件处理：
$('#my-slider').slider({change: function(event, ui) { // 事件处理 }}); //或 $('#my-slider').slider() .on('slidechange', function(event, ui) { // 事件处理 });当用户停止滑动滑块的把手时进行的事件处理：
$('#my-slider').slider({stop: function(event, ui) { // 事件处理 }}); //或 $('#my-slider').slider() .on('slidestop', function(event, ui) { // 事件处理 });7.8.4 调用滑块的方法滑块微件使用的方法与第6章讲的可拖曳交互组件以及对话框和折叠菜单微件相同。请参阅这些章节来获得关于destroy、disable、enable、option和widget的详细内容。
将滑块的值更新为10：
$('#my-slider').slider('value', 10);将滑块的取值范围更新为10～20：
$('#my-slider').slider('values', [10, 20]);
相关资源：jQuery.ui.1.7.2中文文档