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:

+

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:

+

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:

-
+

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