r1395 - trunk/demos/slider
Author: rdworth
Date: Tue Dec 30 22:49:37 2008
New Revision: 1395
Modified:
trunk/demos/slider/range.html
Log:
demos/slider/range.html: added feedback input
Modified: trunk/demos/slider/range.html
==============================================================================
--- trunk/demos/slider/range.html (original)
+++ trunk/demos/slider/range.html Tue Dec 30 22:49:37 2008
@@ -13,8 +13,12 @@
range: true,
min: 0,
max: 500,
- values: [75, 300]
+ 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>
@@ -22,14 +26,22 @@
<div class="demo">
-Price range:
+
+<label for="amount">Price range:</label>
+<input type="text" id="amount" style="border:0; color:#f6931f;
font-weight:bold;" />
+
+
<div id="slider-range"></div>
</div><!-- End demo -->
<div class="demo-description">
-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:
+
+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:
+
+
<pre><code>range: true
</code></pre>