2008-12-30 04:16:51 +00:00
<!doctype html>
< html lang = "en" >
< head >
< title > jQuery UI Slider - Range Max 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-max").slider({
range: "max",
2008-12-30 19:08:39 +00:00
min:1,
max:10,
2008-12-30 21:33:00 +00:00
value: 2,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
2008-12-30 04:16:51 +00:00
});
2008-12-30 21:33:00 +00:00
$("#amount").val($("#slider-range-max").slider("value")); });
2008-12-30 04:16:51 +00:00
< / script >
< / head >
< body >
2008-12-30 19:08:39 +00:00
< div class = "demo" >
2008-12-30 21:33:00 +00:00
< p > Minimum number of bedrooms: < 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-max" > < / div >
2008-12-30 19:08:39 +00:00
< / div > <!-- End demo -->
< div class = "demo-description" >
2008-12-31 01:20:50 +00:00
< p > An example of a range slider that has the filled bar hard-coded to the maximum value plus a single slider. This makes it clear that selecting a value will also include all values above the selection. This is a range option type:< / p >
2008-12-30 19:08:39 +00:00
< pre >
range: "max",
2008-12-31 01:20:50 +00:00
< / pre >
2008-12-30 21:33:00 +00:00
< p > This demo also shows how the current slider value can be used to populate a standard form input that can also be used for user feedback.< / p >
2008-12-30 19:08:39 +00:00
< / div > <!-- End demo - description -->
2008-12-30 04:16:51 +00:00
< / body >
< / html >
