aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/demos/slider
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/demos/slider')
-rw-r--r--static/development-bundle/demos/slider/colorpicker.html92
-rw-r--r--static/development-bundle/demos/slider/default.html34
-rw-r--r--static/development-bundle/demos/slider/index.html25
-rw-r--r--static/development-bundle/demos/slider/multiple-vertical.html76
-rw-r--r--static/development-bundle/demos/slider/range-vertical.html47
-rw-r--r--static/development-bundle/demos/slider/range.html48
-rw-r--r--static/development-bundle/demos/slider/rangemax.html47
-rw-r--r--static/development-bundle/demos/slider/rangemin.html48
-rw-r--r--static/development-bundle/demos/slider/slider-vertical.html49
-rw-r--r--static/development-bundle/demos/slider/steps.html48
10 files changed, 514 insertions, 0 deletions
diff --git a/static/development-bundle/demos/slider/colorpicker.html b/static/development-bundle/demos/slider/colorpicker.html
new file mode 100644
index 0000000..0f7c264
--- /dev/null
+++ b/static/development-bundle/demos/slider/colorpicker.html
@@ -0,0 +1,92 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Slider - Colorpicker</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.slider.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <style type="text/css">
11 #red, #green, #blue {
12 float: left;
13 clear: left;
14 width: 300px;
15 margin: 15px;
16 }
17 #swatch {
18 width: 120px;
19 height: 100px;
20 margin-top: 18px;
21 margin-left: 350px;
22 background-image: none;
23 }
24 #red .ui-slider-range { background: #ef2929; }
25 #red .ui-slider-handle { border-color: #ef2929; }
26 #green .ui-slider-range { background: #8ae234; }
27 #green .ui-slider-handle { border-color: #8ae234; }
28 #blue .ui-slider-range { background: #729fcf; }
29 #blue .ui-slider-handle { border-color: #729fcf; }
30 #demo-frame > div.demo { padding: 10px !important; };
31 </style>
32 <script type="text/javascript">
33 function hexFromRGB (r, g, b) {
34 var hex = [
35 r.toString(16),
36 g.toString(16),
37 b.toString(16)
38 ];
39 $.each(hex, function (nr, val) {
40 if (val.length == 1) {
41 hex[nr] = '0' + val;
42 }
43 });
44 return hex.join('').toUpperCase();
45 }
46 function refreshSwatch() {
47 var red = $("#red").slider("value")
48 ,green = $("#green").slider("value")
49 ,blue = $("#blue").slider("value")
50 ,hex = hexFromRGB(red, green, blue);
51 $("#swatch").css("background-color", "#" + hex);
52 }
53 $(function() {
54 $("#red, #green, #blue").slider({
55 orientation: 'horizontal',
56 range: "min",
57 max: 255,
58 value: 127,
59 slide: refreshSwatch,
60 change: refreshSwatch
61 });
62 $("#red").slider("value", 255);
63 $("#green").slider("value", 140);
64 $("#blue").slider("value", 60);
65 });
66 </script>
67</head>
68<body class="ui-widget-content" style="border:0;">
69
70<div class="demo">
71
72<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
73<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
74Simple Colorpicker
75</p>
76
77<div id="red"></div>
78<div id="green"></div>
79<div id="blue"></div>
80
81<div id="swatch" class="ui-widget-content ui-corner-all"></div>
82
83</div><!-- End demo -->
84
85<div class="demo-description" style="clear:left;">
86
87<p>Combine three sliders to create a simple RGB colorpicker.</p>
88
89</div><!-- End demo-description -->
90
91</body>
92</html>
diff --git a/static/development-bundle/demos/slider/default.html b/static/development-bundle/demos/slider/default.html
new file mode 100644
index 0000000..da92869
--- /dev/null
+++ b/static/development-bundle/demos/slider/default.html
@@ -0,0 +1,34 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Slider - Default functionality</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.slider.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <style type="text/css">
11 #demo-frame > div.demo { padding: 10px !important; };
12 </style>
13 <script type="text/javascript">
14 $(function() {
15 $("#slider").slider();
16 });
17 </script>
18</head>
19<body>
20
21<div class="demo">
22
23<div id="slider"></div>
24
25</div><!-- End demo -->
26
27<div class="demo-description">
28
29<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
30
31</div><!-- End demo-description -->
32
33</body>
34</html>
diff --git a/static/development-bundle/demos/slider/index.html b/static/development-bundle/demos/slider/index.html
new file mode 100644
index 0000000..9a010a5
--- /dev/null
+++ b/static/development-bundle/demos/slider/index.html
@@ -0,0 +1,25 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Slider Demos</title>
5 <link type="text/css" href="../demos.css" rel="stylesheet" />
6</head>
7<body>
8
9<div class="demos-nav">
10 <h4>Examples</h4>
11 <ul>
12 <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
13 <li><a href="steps.html">Snap to increments</a></li>
14 <li><a href="range.html">Range slider</a></li>
15 <li><a href="rangemin.html">Range with fixed minimum</a></li>
16 <li><a href="rangemax.html">Range with fixed maximum</a></li>
17 <li><a href="slider-vertical.html">Vertical slider</a></li>
18 <li><a href="range-vertical.html">Vertical range slider</a></li>
19 <li><a href="multiple-vertical.html">Multiple sliders</a></li>
20 <li><a href="colorpicker.html">Simple colorpicker</a></li>
21 </ul>
22</div>
23
24</body>
25</html>
diff --git a/static/development-bundle/demos/slider/multiple-vertical.html b/static/development-bundle/demos/slider/multiple-vertical.html
new file mode 100644
index 0000000..48258cc
--- /dev/null
+++ b/static/development-bundle/demos/slider/multiple-vertical.html
@@ -0,0 +1,76 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Slider - Multiple sliders</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.slider.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <style type="text/css">
11 #demo-frame > div.demo { padding: 10px !important; }
12 #eq span {
13 height:120px; float:left; margin:15px
14 }
15 </style>
16 <script type="text/javascript">
17 $(function() {
18 // change defaults for range, animate and orientation
19 $.extend($.ui.slider.defaults, {
20 range: "min",
21 animate: true,
22 orientation: "vertical"
23 });
24 // setup master volume
25 $("#master").slider({
26 value: 60,
27 orientation: "horizontal"
28 });
29 // setup graphic EQ
30 $("#eq > span").each(function() {
31 // read initial values from markup and remove that
32 var value = parseInt($(this).text());
33 $(this).empty();
34 $(this).slider({
35 value: value
36 })
37 });
38 });
39 </script>
40</head>
41<body class="ui-widget-content" style="border:0;">
42
43<div class="demo">
44
45<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
46<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
47Master volume
48</p>
49
50<div id="master" style="width:260px; margin:15px;"></div>
51
52<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
53<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
54Graphic EQ
55</p>
56
57<div id="eq">
58 <span>88</span>
59 <span>77</span>
60 <span>55</span>
61 <span>33</span>
62 <span>40</span>
63 <span>45</span>
64 <span>70</span>
65</div>
66
67</div><!-- End demo -->
68
69<div class="demo-description" style="clear:left;">
70
71<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
72
73</div><!-- End demo-description -->
74
75</body>
76</html>
diff --git a/static/development-bundle/demos/slider/range-vertical.html b/static/development-bundle/demos/slider/range-vertical.html
new file mode 100644
index 0000000..ad59511
--- /dev/null
+++ b/static/development-bundle/demos/slider/range-vertical.html
@@ -0,0 +1,47 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Slider - Vertical range slider</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.slider.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <style type="text/css">
11 #demo-frame > div.demo { padding: 10px !important; };
12 </style>
13 <script type="text/javascript">
14 $(function() {
15 $("#slider-range").slider({
16 orientation: "vertical",
17 range: true,
18 values: [17, 67],
19 slide: function(event, ui) {
20 $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
21 }
22 });
23 $("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
24 });
25 </script>
26</head>
27<body>
28
29<div class="demo">
30
31<p>
32<label for="amount">Target sales goal (Millions):</label>
33<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
34</p>
35
36<div id="slider-range" style="height:250px;"></div>
37
38</div><!-- End demo -->
39
40<div class="demo-description">
41
42<p>Change the orientation of the range slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
43
44</div><!-- End demo-description -->
45
46</body>
47</html>
diff --git a/static/development-bundle/demos/slider/range.html b/static/development-bundle/demos/slider/range.html
new file mode 100644
index 0000000..7c595e0
--- /dev/null
+++ b/static/development-bundle/demos/slider/range.html
@@ -0,0 +1,48 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Slider - Range slider</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.slider.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <style type="text/css">
11 #demo-frame > div.demo { padding: 10px !important; };
12 </style>
13 <script type="text/javascript">
14 $(function() {
15 $("#slider-range").slider({
16 range: true,
17 min: 0,
18 max: 500,
19 values: [75, 300],
20 slide: function(event, ui) {
21 $("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
22 }
23 });
24 $("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
25 });
26 </script>
27</head>
28<body>
29
30<div class="demo">
31
32<p>
33<label for="amount">Price range:</label>
34<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
35</p>
36
37<div id="slider-range"></div>
38
39</div><!-- End demo -->
40
41<div class="demo-description">
42
43<p>Set the <code>range</code> option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p>
44
45</div><!-- End demo-description -->
46
47</body>
48</html>
diff --git a/static/development-bundle/demos/slider/rangemax.html b/static/development-bundle/demos/slider/rangemax.html
new file mode 100644
index 0000000..db266db
--- /dev/null
+++ b/static/development-bundle/demos/slider/rangemax.html
@@ -0,0 +1,47 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Slider - Range with fixed maximum</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.slider.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <style type="text/css">
11 #demo-frame > div.demo { padding: 10px !important; };
12 </style>
13 <script type="text/javascript">
14 $(function() {
15 $("#slider-range-max").slider({
16 range: "max",
17 min: 1,
18 max: 10,
19 value: 2,
20 slide: function(event, ui) {
21 $("#amount").val(ui.value);
22 }
23 });
24 $("#amount").val($("#slider-range-max").slider("value"));
25 });
26 </script>
27</head>
28<body>
29
30<div class="demo">
31
32<p>
33<labe for="amount">Minimum number of bedrooms:</label>
34<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
35</p>
36<div id="slider-range-max"></div>
37
38</div><!-- End demo -->
39
40<div class="demo-description">
41
42<p>Fix the maximum value of the range slider so that the user can only select a minimum. Set the <code>range</code> option to "max."</p>
43
44</div><!-- End demo-description -->
45
46</body>
47</html>
diff --git a/static/development-bundle/demos/slider/rangemin.html b/static/development-bundle/demos/slider/rangemin.html
new file mode 100644
index 0000000..4eebade
--- /dev/null
+++ b/static/development-bundle/demos/slider/rangemin.html
@@ -0,0 +1,48 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Slider - Range with fixed minimum</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.slider.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <style type="text/css">
11 #demo-frame > div.demo { padding: 10px !important; };
12 </style>
13 <script type="text/javascript">
14 $(function() {
15 $("#slider-range-min").slider({
16 range: "min",
17 value: 37,
18 min: 1,
19 max: 700,
20 slide: function(event, ui) {
21 $("#amount").val('$' + ui.value);
22 }
23 });
24 $("#amount").val('$' + $("#slider-range-min").slider("value"));
25 });
26 </script>
27</head>
28<body>
29
30<div class="demo">
31
32<p>
33<label for="amount">Maximum price:</label>
34<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
35</p>
36
37<div id="slider-range-min"></div>
38
39</div><!-- End demo -->
40
41<div class="demo-description">
42
43<p>Fix the minimum value of the range slider so that the user can only select a maximum. Set the <code>range</code> option to "min."</p>
44
45</div><!-- End demo-description -->
46
47</body>
48</html>
diff --git a/static/development-bundle/demos/slider/slider-vertical.html b/static/development-bundle/demos/slider/slider-vertical.html
new file mode 100644
index 0000000..7731a4b
--- /dev/null
+++ b/static/development-bundle/demos/slider/slider-vertical.html
@@ -0,0 +1,49 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Slider - Vertical slider</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.slider.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <style type="text/css">
11 #demo-frame > div.demo { padding: 10px !important; };
12 </style>
13 <script type="text/javascript">
14 $(function() {
15 $("#slider-vertical").slider({
16 orientation: "vertical",
17 range: "min",
18 min: 0,
19 max: 100,
20 value: 60,
21 slide: function(event, ui) {
22 $("#amount").val(ui.value);
23 }
24 });
25 $("#amount").val($("#slider-vertical").slider("value"));
26 });
27 </script>
28</head>
29<body>
30
31<div class="demo">
32
33<p>
34<label for="amount">Volume:</label>
35<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
36</p>
37
38<div id="slider-vertical" style="height:200px;"></div>
39
40</div><!-- End demo -->
41
42<div class="demo-description">
43
44<p>Change the orientation of the slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
45
46</div><!-- End demo-description -->
47
48</body>
49</html>
diff --git a/static/development-bundle/demos/slider/steps.html b/static/development-bundle/demos/slider/steps.html
new file mode 100644
index 0000000..f29b734
--- /dev/null
+++ b/static/development-bundle/demos/slider/steps.html
@@ -0,0 +1,48 @@
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Slider - Snap to increments</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
7 <script type="text/javascript" src="../../ui/ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/ui.slider.js"></script>
9 <link type="text/css" href="../demos.css" rel="stylesheet" />
10 <style type="text/css">
11 #demo-frame > div.demo { padding: 10px !important; };
12 </style>
13 <script type="text/javascript">
14 $(function() {
15 $("#slider").slider({
16 value:100,
17 min: 0,
18 max: 500,
19 step: 50,
20 slide: function(event, ui) {
21 $("#amount").val('$' + ui.value);
22 }
23 });
24 $("#amount").val('$' + $("#slider").slider("value"));
25 });
26 </script>
27</head>
28<body>
29
30<div class="demo">
31
32<p>
33<label for="amount">Donation amount ($50 increments):</label>
34<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
35</p>
36
37<div id="slider"></div>
38
39</div><!-- End demo -->
40
41<div class="demo-description">
42
43<p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.</p>
44
45</div><!-- End demo-description -->
46
47</body>
48</html>
© 2015 Mike Crute