From ee99ec9b8a897cbafcb072f9cf4b50c43739fbad Mon Sep 17 00:00:00 2001 From: Todd Parker Date: Tue, 30 Dec 2008 21:33:00 +0000 Subject: Added feedback of the current slider value next to label. --- demos/slider/range.html | 2 +- demos/slider/rangemax.html | 10 +++++++--- demos/slider/rangemin.html | 12 +++++++++--- demos/slider/slider_vertical.html | 18 +++++++++++++----- demos/slider/steps.html | 5 +++-- 5 files changed, 33 insertions(+), 14 deletions(-) (limited to 'demos/slider') 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], }); }); 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")); });

Minimum number of bedrooms:

@@ -35,6 +38,7 @@

 range: "max",

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.

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")); });

Maximum price:

@@ -33,6 +38,7 @@

 range: "min",

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.

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")); }); @@ -21,8 +27,8 @@

Volume:

@@ -30,8 +36,10 @@

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

orientation: "vertical",

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

orientation: "vertical",

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.

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 @@