demos/slider/range.html: added feedback input

jquery · Dec 31, 2008 · 7dd66fa · 7dd66fa
1 parent c067e99
commit 7dd66fa
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/demos/slider/range.html b/demos/slider/range.html
@@ -13,23 +13,35 @@
 			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>
 <body>
 
 <div class="demo">
 
-<p>Price range:</p>
+<p>
+<label for="amount">Price range:</label>
+<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
+
 <div id="slider-range"></div>
 
 </div><!-- End demo -->
 
 <div class="demo-description">
 
-<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>
+<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>
+
 <pre><code>range: true
 </code></pre>