From 7dd66fa029c3e00f1de49fe90cd44b876d26c0dd Mon Sep 17 00:00:00 2001
From: Richard Worth <rdworth@gmail.com>
Date: Wed, 31 Dec 2008 06:49:37 +0000
Subject: [PATCH] demos/slider/range.html: added feedback input

---
 demos/slider/range.html | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/demos/slider/range.html b/demos/slider/range.html
index b65509abb..8bcb6a6df 100644
--- a/demos/slider/range.html
+++ b/demos/slider/range.html
@@ -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">
 
-<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>
 
-- 
2.39.5