aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorTodd Parker <fg.todd@gmail.com>2008-12-30 19:08:39 +0000
committerTodd Parker <fg.todd@gmail.com>2008-12-30 19:08:39 +0000
commitf57f31c72d180442785bbf92290799c140aa17eb (patch)
tree9aa619402c3c9c5be4589d33a39e2f2fe8c52e48
parent7281bd73d64c6fa6f68fe15d5aaac601f0cb2adc (diff)
downloadjquery-ui-f57f31c72d180442785bbf92290799c140aa17eb.tar.gz
jquery-ui-f57f31c72d180442785bbf92290799c140aa17eb.zip
Added container divs and added descriptions
Diffstat
-rw-r--r--demos/slider/default.html17
-rw-r--r--demos/slider/multiple_vertical.html13
-rw-r--r--demos/slider/range.html21
-rw-r--r--demos/slider/range_vertical.html20
-rw-r--r--demos/slider/rangemax.html20
-rw-r--r--demos/slider/rangemin.html17
-rw-r--r--demos/slider/slider_vertical.html16
-rw-r--r--demos/slider/steps.html15
8 files changed, 135 insertions, 4 deletions
diff --git a/demos/slider/default.html b/demos/slider/default.html
index 475ba1c7a..972c5497a 100644
--- a/demos/slider/default.html
+++ b/demos/slider/default.html
@@ -17,7 +17,24 @@
</head>
<body>
+
+
+<div class="demo">
+
<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: <pre>value: 37</pre></p>
+
+</div><!-- End demo-description -->
+
+
+
+
</body>
</html>
diff --git a/demos/slider/multiple_vertical.html b/demos/slider/multiple_vertical.html
index cafd1b48e..30d215133 100644
--- a/demos/slider/multiple_vertical.html
+++ b/demos/slider/multiple_vertical.html
@@ -53,6 +53,9 @@
</head>
<body>
+
+<div class="demo">
+
Master volume:
<div id="slider0" style="width:260px; margin:15px; clear:both;"></div>
@@ -66,5 +69,15 @@ Graphic EQ:
<div id="slider5" style="height:120px; float:left; margin:15px"></div>
<div id="slider6" style="height:120px; float:left; margin:15px"></div>
<div id="slider7" style="height:120px; float:left; margin:15px"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<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 -->
</body>
</html>
diff --git a/demos/slider/range.html b/demos/slider/range.html
index e9b1f2787..80f097bf5 100644
--- a/demos/slider/range.html
+++ b/demos/slider/range.html
@@ -11,14 +11,33 @@
$(function() {
$("#slider-range").slider({
range: true,
- values: [17, 67]
+ min: 0,
+ max: 500,
+ values: [75, 300]
});
});
</script>
</head>
<body>
+
+
+
+<p>Price range:</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>
+<pre>
+range: true,
+</pre>
+
+</div><!-- End demo-description -->
+
</body>
</html>
diff --git a/demos/slider/range_vertical.html b/demos/slider/range_vertical.html
index f9cf7b4d2..18bfd4a15 100644
--- a/demos/slider/range_vertical.html
+++ b/demos/slider/range_vertical.html
@@ -19,7 +19,25 @@
</head>
<body>
-<div id="slider-range" style="height:300px;"></div>
+<div class="demo">
+
+<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",
+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 the script options or by adding a height through CSS. </p>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html
index 2987505cc..fb42cc54f 100644
--- a/demos/slider/rangemax.html
+++ b/demos/slider/rangemax.html
@@ -11,14 +11,32 @@
$(function() {
$("#slider-range-max").slider({
range: "max",
- value: 63
+ min:1,
+ max:10,
+ value: 2
});
});
</script>
</head>
<body>
+<div class="demo">
+
+<p>Minimum number of bedrooms:</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>
+<pre>
+range: "max",
+</pre>
+
+</div><!-- End demo-description -->
+
</body>
</html>
diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html
index 1a4923887..339680859 100644
--- a/demos/slider/rangemin.html
+++ b/demos/slider/rangemin.html
@@ -18,7 +18,24 @@
</head>
<body>
+<div class="demo">
+
+<p>Maximum price:</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>
+<pre>
+range: "min",
+</pre>
+
+</div><!-- End demo-description -->
+
+
</body>
</html>
diff --git a/demos/slider/slider_vertical.html b/demos/slider/slider_vertical.html
index 3479aed4a..7c1fdb01d 100644
--- a/demos/slider/slider_vertical.html
+++ b/demos/slider/slider_vertical.html
@@ -18,7 +18,21 @@
</head>
<body>
-<div id="slider-vertical" style="height:300px;"></div>
+
+<div class="demo">
+
+<div id="slider-vertical" style="height:250px;"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+<p>This is an example of a 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>
+
+</div><!-- End demo-description -->
</body>
</html>
diff --git a/demos/slider/steps.html b/demos/slider/steps.html
index da3d0f94b..84c9721bb 100644
--- a/demos/slider/steps.html
+++ b/demos/slider/steps.html
@@ -17,7 +17,22 @@
</head>
<body>
+<div class="demo">
+
<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>
+min: 0, max: 500, step: 50
+</pre>
+
+</div><!-- End demo-description -->
+
</body>
</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 21:53:11 +0000