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/default.html           | 11 +++++------
 demos/slider/multiple_vertical.html |  5 ++++-
 demos/slider/range.html             |  5 ++---
 demos/slider/range_vertical.html    | 34 +++++++++++++++++++++++++---------
 demos/slider/rangemax.html          | 26 +++++++++++++++++---------
 demos/slider/rangemin.html          | 28 ++++++++++++++++++----------
 demos/slider/slider_vertical.html   | 24 ++++++++++++++++++------
 demos/slider/steps.html             | 27 ++++++++++++++++++++-------
 8 files changed, 109 insertions(+), 51 deletions(-)

(limited to 'demos/slider')

diff --git a/demos/slider/default.html b/demos/slider/default.html
index 8d8096a9d..28fd1f59b 100644
--- a/demos/slider/default.html
+++ b/demos/slider/default.html
@@ -9,9 +9,7 @@
 	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#slider").slider({
-			value: 37
-		});
+		$("#slider").slider();
 	});
 	</script>
 </head>
@@ -19,15 +17,16 @@
 
 <div class="demo">
 
-<p>Your age:</p>
 <div id="slider"></div>
 
 </div><!-- End demo -->
 
 <div class="demo-description">
 
-<p>The default slider has a single handle and is horizontal. The handle can be moved with the mouse or by using the arrow keys and has full ARIA attributes for accessibility. The current value for the slider can be set with the value option:</p>
-<pre>value: 37</pre>
+<p>
+The default slider has a single handle and is horizontal.
+The handle can be moved with the mouse or by using the arrow keys and has full ARIA attributes for accessibility.
+</p>
 
 </div><!-- End demo-description -->
 
diff --git a/demos/slider/multiple_vertical.html b/demos/slider/multiple_vertical.html
index 5a1913221..f6f263e7d 100644
--- a/demos/slider/multiple_vertical.html
+++ b/demos/slider/multiple_vertical.html
@@ -66,6 +66,7 @@ Master volume
 <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
 Graphic EQ
 </p>
+
 <div id="slider1" style="height:120px; float:left; margin:15px"></div>
 <div id="slider2" style="height:120px; float:left; margin:15px"></div>
 <div id="slider3" style="height:120px; float:left; margin:15px"></div>
@@ -78,7 +79,9 @@ Graphic EQ
 
 <div class="demo-description" style="clear:left;">
 
-<p>This example shows how easy it is to add multiple sliders to a page, each with their own options, to make a UI for a music player.</p>
+<p>
+This example shows how easy it is to add multiple sliders to a page, each with their own options, to make a UI for a music player.
+</p>
 
 </div><!-- End demo-description -->
 
diff --git a/demos/slider/range.html b/demos/slider/range.html
index 7f5deaf9e..203c14689 100644
--- a/demos/slider/range.html
+++ b/demos/slider/range.html
@@ -30,9 +30,8 @@
 <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>
-<pre>
-range: true
-</pre>
+<pre><code>range: true
+</code></pre>
 
 </div><!-- End demo-description -->
 
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 -->
 
diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html
index 90a80ce35..d5abf5fd7 100644
--- a/demos/slider/rangemax.html
+++ b/demos/slider/rangemax.html
@@ -11,8 +11,8 @@
 	$(function() {
 		$("#slider-range-max").slider({
 			range: "max",
-			min:1,
-			max:10,
+			min: 1,
+			max: 10,
 			value: 2,
 			slide: function(event, ui) {
 				$("#amount").val(ui.value);
@@ -26,20 +26,28 @@
 
 <div class="demo">
 
-<p>Minimum number of bedrooms: <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/></p>
+<p>
+<labe for="amount">Minimum number of bedrooms:</label>
+<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
 <div id="slider-range-max"></div>
 
 </div><!-- End demo -->
 
+<div class="demo-description">
 
+<p>
+An example of a range slider that has the filled bar hard-coded to the maximum value plus a single slider.
+This makes it clear that selecting a value will also include all values above the selection.
+This is a range option type:
+</p>
 
-<div class="demo-description">
+<pre><code>range: "max"
+</code></pre>
 
-<p>An example of a range slider that has the filled bar hard-coded to the maximum value plus a single slider. This makes it clear that selecting a value will also include all values above the selection. This is a range option type:</p>
-<pre>
-range: "max",
-</pre>
-<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>
+<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 -->
 
diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html
index 96b7650a8..707f23ef7 100644
--- a/demos/slider/rangemin.html
+++ b/demos/slider/rangemin.html
@@ -12,8 +12,8 @@
 		$("#slider-range-min").slider({
 			range: "min",
 			value: 37,
-			min:1,
-			max:700,
+			min: 1,
+			max: 700,
 			slide: function(event, ui) {
 				$("#amount").val('$' + ui.value);
 			}
@@ -26,23 +26,31 @@
 
 <div class="demo">
 
-<p>Maximum price: <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/></p>
+<p>
+<label for="amount">Maximum price:</label>
+<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
+</p>
+
 <div id="slider-range-min"></div>
 
 </div><!-- End demo -->
 
+<div class="demo-description">
 
+<p>
+An example of a range slider that has the filled bar hard-coded to the minimum value plus a single slider.
+This makes it clear that selecting a value will also include all values below the selection.
+This is a range option type:
+</p>
 
-<div class="demo-description">
+<pre><code>range: "min"
+</code></pre>
 
-<p>An example of a range slider that has the filled bar hard-coded to the minimum value plus a single slider. This makes it clear that selecting a value will also include all values below the selection. This is a range option type:</p>
-<pre>
-range: "min",
-</pre>
-<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>
+<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 -->
 
-
 </body>
 </html>
diff --git a/demos/slider/slider_vertical.html b/demos/slider/slider_vertical.html
index 12763dbd5..178d29852 100644
--- a/demos/slider/slider_vertical.html
+++ b/demos/slider/slider_vertical.html
@@ -25,22 +25,34 @@
 </head>
 <body>
 
-
 <div class="demo">
 
-<p>Volume: <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/></p>
+<p>
+<label for="amount">Volume:</label>
+<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/>
+</p>
+
 <div id="slider-vertical" style="height:200px;"></div>
 
 </div><!-- End demo -->
 
+<div class="demo-description">
 
+<p>
+This is an example of a minimum range vertical slider created by setting the orientation to vertical:
+</p>
 
-<div class="demo-description">
+<pre><code>orientation: "vertical"
+</code></pre>
 
-<p>This is an example of a minimum range vertical slider created by setting the orientation to vertical:</p> <pre>orientation: "vertical",</pre>
-<p>It's important to note that a vertical slider needs a height set. You can do this via the script options or by adding a 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>
+<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 -->
 
diff --git a/demos/slider/steps.html b/demos/slider/steps.html
index 1e5fb91cc..e1e3cb9a6 100644
--- a/demos/slider/steps.html
+++ b/demos/slider/steps.html
@@ -26,20 +26,33 @@
 
 <div class="demo">
 
-<p>Donation amount ($50 increments): <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/></p>
+<p>
+<label for="amount">Donation amount ($50 increments):</label>
+<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/>
+</p>
+
 <div id="slider"></div>
 
 </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><code>min: 0,
+max: 500,
+step: 50
+</code></pre>
 
-<div class="demo-description">
+<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>
 
-<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>
-<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 -->
 
 </body>
-- 
cgit v1.2.3