aboutsummaryrefslogtreecommitdiffstats
path: root/demos/slider
diff options
context:
space:
mode:
authorTodd Parker <fg.todd@gmail.com>2008-12-30 21:33:00 +0000
committerTodd Parker <fg.todd@gmail.com>2008-12-30 21:33:00 +0000
commitee99ec9b8a897cbafcb072f9cf4b50c43739fbad (patch)
tree4ec3091a80bc8b9444ff7ceb223439aec169b36e /demos/slider
parent25210e9cfdfd9591299a814d93a8cff9cf776856 (diff)
downloadjquery-ui-ee99ec9b8a897cbafcb072f9cf4b50c43739fbad.tar.gz
jquery-ui-ee99ec9b8a897cbafcb072f9cf4b50c43739fbad.zip
Added feedback of the current slider value next to label.
Diffstat (limited to 'demos/slider')
-rw-r--r--demos/slider/range.html2
-rw-r--r--demos/slider/rangemax.html10
-rw-r--r--demos/slider/rangemin.html12
-rw-r--r--demos/slider/slider_vertical.html18
-rw-r--r--demos/slider/steps.html5
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>