From 58a11a7dec11bdfc1f43f210ffd52da3816a530c Mon Sep 17 00:00:00 2001
From: Richard Worth <rdworth@gmail.com>
Date: Wed, 31 Dec 2008 05:01:58 +0000
Subject: demos: added <code> inside <pre>. some other minor updates

---
 demos/slider/range_vertical.html | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

(limited to 'demos/slider/range_vertical.html')

diff --git a/demos/slider/range_vertical.html b/demos/slider/range_vertical.html
index 5dd634e18..3cc55544d 100644
--- a/demos/slider/range_vertical.html
+++ b/demos/slider/range_vertical.html
@@ -12,8 +12,12 @@
 		$("#slider-range").slider({
 			orientation: "vertical",
 			range: true,
-			values: [45, 67]
+			values: [17, 67],
+			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>
@@ -21,22 +25,34 @@
 
 <div class="demo">
 
-<p>Target sales goal (Millions):</p>
+<p>
+<label for="amount">Target sales goal (Millions):</label>
+<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
+
 <div id="slider-range" style="height:250px;"></div>
 
 </div><!-- End demo -->
 
-
-
 <div class="demo-description">
 
-<p>This is an example of a vertical range slider created by setting the orientation to vertical:</p>
-<pre>
-orientation: "vertical",
+<p>
+This is an example of a vertical range slider created by setting the orientation to vertical:
+</p>
+
+<pre><code>orientation: "vertical",
 range: true,
 values: [17, 67]
-</pre>
-<p>It's important to note that a vertical slider needs a height set. You can do this via .height() or by setting the height through CSS. </p>
+</code></pre>
+
+<p>
+It's important to note that a vertical slider needs a height set.
+You can do this via <code>.height()</code> or by setting the height through CSS.
+</p>
+
+<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>
 
 </div><!-- End demo-description -->
 
-- 
cgit v1.2.3