jQuery 入门教程(38): jQuery UI Slider 示例（一）-优快云博客

jQuery Slider组件可以把选中的HTML元素变成滑动条UI控件，滑动条可以支持多个滑块用来设置单个值或一个值域。
基本用法

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("#slider").slider(); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
<divid="slider"></div> 
 
    17
 
</body> 
 
</html>

多个滑块选择值域

Slider支持使用两个滑块来选择一个值域，通过 min,max指定大范围， values 指定当前选择的值域。

 
    1 range:true 
 
    2min: 0,
 
    3max: 500,
 
    4values: [ 75, 300 ],

完整代码如下：

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("#slider-range").slider({ 
 
range: true, 
 
min: 0, 
 
max: 500, 
 
values: [75, 300], 
 
slide: function (event, ui) { 
 
$("#amount").val("$" + ui.values[0] 
 
+ " - $" + ui.values[1]); 
 
} 
 
}); 
 
$("#amount").val("$" 
 
+ $("#slider-range").slider("values", 0) + 
 
" - $" + $("#slider-range").slider("values", 1)); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    28
 
<p> 
 
<labelfor="amount">Price range:</label> 
 
<inputtype="text"id="amount" 
 
style="border: 0; color: #f6931f; 
 
font-weight: bold;" /> 
 
</p> 
 
    35
 
<divid="slider-range"></div> 
 
    37
 
    38
 
</body> 
 
</html>