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/slider_vertical.html | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) (limited to 'demos/slider/slider_vertical.html') 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:

-

+

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.

+

-- cgit v1.2.3