diff options
| author | Richard Worth <rdworth@gmail.com> | 2008-12-31 06:49:37 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2008-12-31 06:49:37 +0000 |
| commit | 7dd66fa029c3e00f1de49fe90cd44b876d26c0dd (patch) | |
| tree | 48d28320cbe91fbf1c46b0d3dec427e315c8bff0 /demos | |
| parent | c067e99bb9fbc91c3815aeb38cda485c20714493 (diff) | |
| download | jquery-ui-7dd66fa029c3e00f1de49fe90cd44b876d26c0dd.tar.gz jquery-ui-7dd66fa029c3e00f1de49fe90cd44b876d26c0dd.zip | |
demos/slider/range.html: added feedback input
Diffstat (limited to 'demos')
| -rw-r--r-- | demos/slider/range.html | 18 |
1 files changed, 15 insertions, 3 deletions
diff --git a/demos/slider/range.html b/demos/slider/range.html index b65509abb..8bcb6a6df 100644 --- a/demos/slider/range.html +++ b/demos/slider/range.html @@ -13,8 +13,12 @@ range: true, min: 0, max: 500, - values: [75, 300] + values: [75, 300], + 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> @@ -22,14 +26,22 @@ <div class="demo"> -<p>Price range:</p> +<p> +<label for="amount">Price range:</label> +<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> +</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> +<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><code>range: true </code></pre> |