diff options
| author | Todd Parker <fg.todd@gmail.com> | 2008-12-30 21:33:00 +0000 |
|---|---|---|
| committer | Todd Parker <fg.todd@gmail.com> | 2008-12-30 21:33:00 +0000 |
| commit | ee99ec9b8a897cbafcb072f9cf4b50c43739fbad (patch) | |
| tree | 4ec3091a80bc8b9444ff7ceb223439aec169b36e | |
| parent | 25210e9cfdfd9591299a814d93a8cff9cf776856 (diff) | |
| download | jquery-ui-ee99ec9b8a897cbafcb072f9cf4b50c43739fbad.tar.gz jquery-ui-ee99ec9b8a897cbafcb072f9cf4b50c43739fbad.zip | |
Added feedback of the current slider value next to label.
| -rw-r--r-- | demos/slider/range.html | 2 | ||||
| -rw-r--r-- | demos/slider/rangemax.html | 10 | ||||
| -rw-r--r-- | demos/slider/rangemin.html | 12 | ||||
| -rw-r--r-- | demos/slider/slider_vertical.html | 18 | ||||
| -rw-r--r-- | demos/slider/steps.html | 5 |
5 files changed, 33 insertions, 14 deletions
diff --git a/demos/slider/range.html b/demos/slider/range.html index 0aee3ec18..f86ef23d4 100644 --- a/demos/slider/range.html +++ b/demos/slider/range.html @@ -13,7 +13,7 @@ range: true, min: 0, max: 500, - values: [75, 300] + values: [75, 300], }); }); </script> diff --git a/demos/slider/rangemax.html b/demos/slider/rangemax.html index fb42cc54f..c87f36f22 100644 --- a/demos/slider/rangemax.html +++ b/demos/slider/rangemax.html @@ -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"> -<p>Minimum number of bedrooms:</p> +<p>Minimum number of bedrooms: <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/></p> <div id="slider-range-max"></div> </div><!-- End demo --> @@ -35,6 +38,7 @@ <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> </div><!-- End demo-description --> diff --git a/demos/slider/rangemin.html b/demos/slider/rangemin.html index 339680859..b8496df01 100644 --- a/demos/slider/rangemin.html +++ b/demos/slider/rangemin.html @@ -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"> -<p>Maximum price:</p> +<p>Maximum price: <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/></p> <div id="slider-range-min"></div> </div><!-- End demo --> @@ -33,6 +38,7 @@ <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> </div><!-- End demo-description --> diff --git a/demos/slider/slider_vertical.html b/demos/slider/slider_vertical.html index d29e09b2d..875addb10 100644 --- a/demos/slider/slider_vertical.html +++ b/demos/slider/slider_vertical.html @@ -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"> -<p>Volume:</p> -<div id="slider-vertical" style="height:250px;"></div> +<p>Volume: <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 --> @@ -30,8 +36,10 @@ <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>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> + </div><!-- End demo-description --> diff --git a/demos/slider/steps.html b/demos/slider/steps.html index bc284556a..efb3da303 100644 --- a/demos/slider/steps.html +++ b/demos/slider/steps.html @@ -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"> -<p>Donation amount ($50 increments): <input type="text" id="amount" /></p> +<p>Donation amount ($50 increments): <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/></p> <div id="slider"></div> </div><!-- End demo --> @@ -37,7 +38,7 @@ <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> |