2008-12-30 04:16:51 +00:00
<!doctype html>
< html lang = "en" >
< head >
< title > jQuery UI Slider - Default 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").slider({
2008-12-30 20:49:57 +00:00
min: 0,
max: 500,
step: 50,
slide: function(event, ui) {
$("#amount").val('$' + ui.value);
}
2008-12-30 04:16:51 +00:00
});
2008-12-30 20:49:57 +00:00
$("#amount").val('$' + $("#slider").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 20:49:57 +00:00
< p > Donation amount ($50 increments): < input type = "text" id = "amount" / > < / p >
2008-12-30 04:16:51 +00:00
< div id = "slider" > < / div >
2008-12-30 19:08:39 +00:00
< / div > <!-- End demo -->
< div class = "demo-description" >
< p > This slider has a step value set that will only allow for increments of 50 to be selected. The default step increment is 1. The drag handle will snap to drop points every 50 units. This is set in an option called step:< / p >
< pre >
min: 0, max: 500, step: 50
< / pre >
< / div > <!-- End demo - description -->
2008-12-30 04:16:51 +00:00
< / body >
< / html >
