r1372 - trunk/demos/slider

r1372 - trunk/demos/slider


Author: fg.todd
Date: Tue Dec 30 13:33:00 2008
New Revision: 1372
Modified:
trunk/demos/slider/range.html
trunk/demos/slider/rangemax.html
trunk/demos/slider/rangemin.html
trunk/demos/slider/slider_vertical.html
trunk/demos/slider/steps.html
Log:
Added feedback of the current slider value next to label.
Modified: trunk/demos/slider/range.html
==============================================================================
--- trunk/demos/slider/range.html    (original)
+++ trunk/demos/slider/range.html    Tue Dec 30 13:33:00 2008
@@ -13,7 +13,7 @@
            range: true,
            min: 0,
            max: 500,
-            values: [75, 300]
+            values: [75, 300],
        });
    });
    </script>
Modified: trunk/demos/slider/rangemax.html
==============================================================================
--- trunk/demos/slider/rangemax.html    (original)
+++ trunk/demos/slider/rangemax.html    Tue Dec 30 13:33:00 2008
@@ -13,16 +13,19 @@
            range: "max",
            min:1,
            max:10,
-            value: 2
+            value: 2,
+            slide: function(event, ui) {
+                $("#amount").val(ui.value);
+            }
        });
-    });
+        $("#amount").val($("#slider-range-max").slider("value"));    });
    </script>
</head>
<body>
<div class="demo">
-

Minimum number of bedrooms:


+

Minimum number of bedrooms: <input type="text" id="amount"
style="border:0; color:#f6931f; font-weight:bold;"/>


<div id="slider-range-max"></div>
</div><!-- End demo -->
@@ -35,6 +38,7 @@
<pre>
range: "max",
</pre>
+

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.


</div><!-- End demo-description -->
Modified: trunk/demos/slider/rangemin.html
==============================================================================
--- trunk/demos/slider/rangemin.html    (original)
+++ trunk/demos/slider/rangemin.html    Tue Dec 30 13:33:00 2008
@@ -11,16 +11,21 @@
    $(function() {
        $("#slider-range-min").slider({
            range: "min",
-            value: 37
+            value: 37,
+            min:1,
+            max:700,
+            slide: function(event, ui) {
+                $("#amount").val('$' + ui.value);
+            }
        });
-    });
+        $("#amount").val('$' + $("#slider-range-min").slider("value"));    });
    </script>
</head>
<body>
<div class="demo">
-

Maximum price:


+

Maximum price: <input type="text" id="amount" style="border:0;
color:#f6931f; font-weight:bold;"/>


<div id="slider-range-min"></div>
</div><!-- End demo -->
@@ -33,6 +38,7 @@
<pre>
range: "min",
</pre>
+

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.


</div><!-- End demo-description -->
Modified: trunk/demos/slider/slider_vertical.html
==============================================================================
--- trunk/demos/slider/slider_vertical.html    (original)
+++ trunk/demos/slider/slider_vertical.html    Tue Dec 30 13:33:00 2008
@@ -11,9 +11,15 @@
    $(function() {
        $("#slider-vertical").slider({
            orientation: "vertical",
-            min: 0, max: 500, value: 140
+            range: "min",
+            min: 0,
+            max: 100,
+            value: 60,
+            slide: function(event, ui) {
+                $("#amount").val(ui.value);
+            }
        });
-    });
+        $("#amount").val($("#slider-vertical").slider("value"));    });
    </script>
</head>
<body>
@@ -21,8 +27,8 @@
<div class="demo">
-

Volume:


-<div id="slider-vertical" style="height:250px;"></div>
+

Volume: <input type="text" id="amount" style="border:0; color:#f6931f;
font-weight:bold;"/>


+<div id="slider-vertical" style="height:200px;"></div>
</div><!-- End demo -->
@@ -30,8 +36,10 @@
<div class="demo-description">
-

This is an example of a vertical slider created by setting the
orientation to vertical:

<pre>orientation: "vertical",</pre>
+

This is an example of a minimum range vertical slider created by
setting the orientation to vertical:

<pre>orientation: "vertical",</pre>

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.


+

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.


+
</div><!-- End demo-description -->
Modified: trunk/demos/slider/steps.html
==============================================================================
--- trunk/demos/slider/steps.html    (original)
+++ trunk/demos/slider/steps.html    Tue Dec 30 13:33:00 2008
@@ -10,6 +10,7 @@
    <script type="text/javascript">
    $(function() {
        $("#slider").slider({
+            value:100,
            min: 0,
            max: 500,
            step: 50,
@@ -24,7 +25,7 @@
<div class="demo">
-

Donation amount ($50 increments): <input type="text" id="amount" />


+

Donation amount ($50 increments): <input type="text" id="amount"
style="border:0; color:#f6931f; font-weight:bold;"/>


<div id="slider"></div>
</div><!-- End demo -->
@@ -37,7 +38,7 @@
<pre>            
min: 0, max: 500, step: 50
</pre>
-
+

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.


</div><!-- End demo-description -->
</body>