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 = "../../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 >
2008-12-31 06:29:31 +00:00
< link type = "text/css" href = "../demos.css" rel = "stylesheet" / >
2008-12-30 04:16:51 +00:00
< 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 06:49:37 +00:00
values: [75, 300],
slide: function(event, ui) {
$("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
}
2008-12-30 04:16:51 +00:00
});
2008-12-31 06:49:37 +00:00
$("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
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
2008-12-31 06:49:37 +00:00
< p >
< label for = "amount" > Price range:< / label >
< input type = "text" id = "amount" style = "border:0; color:#f6931f; font-weight:bold;" / >
< / 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 06:49:37 +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 >
