滑塊（slider）是一種允許使用者在刻度軸上通過移動遊标來改變資料數值的小工具(widget).
<!DOCTYPE>
<html>
<head>
<title>滑塊Demo</title>
<meta charset="utf-8"/>
<script src="../jquery-ui/jquery-1.9.1.js"></script>
<script src="../jquery-ui/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="../jquery-ui/themes/base/jquery-ui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
</head>
<style type="text/css">
div#slider.ui-slider
{
background:black;
}
</style>
<h3>Slider</h3>
<div id="slider">
</div>
<script>
$("div#slider").slider({
//disabled:true,//禁用滑塊
animate:true,//使用者在滑塊軸上單擊時建立一個動畫特效
orientation:"vertical",//指定滑塊水準方向還是垂直方向,(horizontal和vertical)
step:1,
//min/max/value/values/range/
//事件//start開始移動遊标/stop停止移動遊标/change遊标改變/slide拖動遊标時
});
</script>
</html> 
顯示單個遊标的值:
<!DOCTYPE>
<html>
<head>
<title>顯示單個遊标的值</title>
<meta charset="utf-8"/>
<script src="../jquery-ui/jquery-1.9.1.js"></script>
<script src="../jquery-ui/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="../jquery-ui/themes/base/jquery-ui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
</head>
<body>
<h3>Slider</h3>
<div id="slider"></div><br/>
Start:<span id="valuestart"></span><br/>
Stop:<span id="valuestop"></span><br/>
Change:<span id="valuechange"></span><br/>
Slide:<span id="valueslide"></span>
<script>
$("div#slider").slider({
animate:true,
start:function(event)//開始時調用
{
var value=$("div#slider").slider("value");
$("#valuestart").html(value);
},
stop:function(event){//停止時調用
var value=$("div#slider").slider("value");
$("#valuestop").html(value);
},
change:function(event)//改變值時調用
{
var value=$("div#slider").slider("value");
$("#valuechange").html(value);
},
slide:function(event)//拖動時調用
{
var value=$("div#slider").slider("value");
$("#valueslide").html(value);
}
});
</script>
</body></html> 
顯示兩個遊标:
<!DOCTYPE>
<html>
<head>
<title>顯示兩個遊标</title>
<meta charset="utf-8"/>
<script src="../jquery-ui/jquery-1.9.1.js"></script>
<script src="../jquery-ui/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="../jquery-ui/themes/base/jquery-ui.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
</head>
<body>
<h3>Slider</h3>
<div id="slider"></div><br/>
Start:<span id="valuestart"></span><br/>
Stop:<span id="valuestop"></span><br/>
Change:<span id="valuechange"></span><br/>
Slide:<span id="valueslide"></span>
<script>
$("div#slider").slider({
animate:true,
range:true,
values:[0,0],
start:function(event)
{
var values=$("div#slider").slider("values");
$("#valuestart").html(values[0]+","+values[1]);
},
stop:function(event)
{
var values=$("div#slider").slider("values");
$("#valuestop").html(values[0]+","+values[1]);
},
change:function(event)
{
var values=$("div#slider").slider("values");
$("#valuechange").html(values[0]+","+values[1]);
},
slide:function(event)
{
var values=$("div#slider").slider("values");
$("#valueslide").html(values[0]+","+values[1]);
}
});
</script>
</body></html>