2008-12-30 04:16:51 +00:00
<!doctype html>
< html lang = "en" >
< head >
< title > jQuery UI Slider - Range Demo< / title >
< link type = "text/css" href = "../demos.css" rel = "stylesheet" / >
< link type = "text/css" href = "../../themes/default/ui.all.css" rel = "stylesheet" / >
< script type = "text/javascript" src = "../../jquery-1.2.6.js" > < / script >
< script type = "text/javascript" src = "../../ui/ui.core.js" > < / script >
< script type = "text/javascript" src = "../../ui/ui.slider.js" > < / script >
< script type = "text/javascript" >
$(function() {
$("#slider-range").slider({
range: true,
2008-12-30 19:08:39 +00:00
min: 0,
max: 500,
2008-12-31 01:59:32 +00:00
values: [75, 300]
2008-12-30 04:16:51 +00:00
});
});
< / script >
< / head >
< body >
2008-12-30 20:16:32 +00:00
< div class = "demo" >
2008-12-30 19:08:39 +00:00
< p > Price range:< / p >
2008-12-30 04:16:51 +00:00
< div id = "slider-range" > < / div >
2008-12-30 19:08:39 +00:00
< / div > <!-- End demo -->
< div class = "demo-description" >
2008-12-31 04:22:19 +00:00
< p > Example of a range slider that had two drag handles and a filled bar that connects the two handles to indicate that the values between them are selected. This is created by setting the range option:< / p >
2008-12-31 05:01:58 +00:00
< pre > < code > range: true
< / code > < / pre >
2008-12-30 19:08:39 +00:00
< / div > <!-- End demo - description -->
2008-12-30 04:16:51 +00:00
< / body >
< / html >
