1 files changed, 76 insertions, 0 deletions
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 @@
+<!doctype html>
+<html lang="en">
+<head>
+        <title>jQuery UI Slider - Multiple sliders</title>
+        <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
+        <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+        <script type="text/javascript" src="../../ui/ui.core.js"></script>
+        <script type="text/javascript" src="../../ui/ui.slider.js"></script>
+        <link type="text/css" href="../demos.css" rel="stylesheet" />
+        <style type="text/css">
+                #demo-frame > div.demo { padding: 10px !important; }
+                #eq span {
+                        height:120px; float:left; margin:15px
+                }
+        </style>
+        <script type="text/javascript">
+        $(function() {
+                // change defaults for range, animate and orientation
+                $.extend($.ui.slider.defaults, {
+                        range: "min",
+                        animate: true,
+                        orientation: "vertical"
+                });
+                // setup master volume
+                $("#master").slider({
+                        value: 60,
+                        orientation: "horizontal"
+                });
+                // setup graphic EQ
+                $("#eq > span").each(function() {
+                        // read initial values from markup and remove that
+                        var value = parseInt($(this).text());
+                        $(this).empty();
+                        $(this).slider({
+                                value: value
+                        })
+                });
+        });
+        </script>
+</head>
+<body class="ui-widget-content" style="border:0;">
+<div class="demo">
+<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
+<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
+Master volume
+</p>
+<div id="master" style="width:260px; margin:15px;"></div>
+<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
+<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
+Graphic EQ
+</p>
+<div id="eq">
+        <span>88</span>
+        <span>77</span>
+        <span>55</span>
+        <span>33</span>
+        <span>40</span>
+        <span>45</span>
+        <span>70</span>
+</div>
+</div><!-- End demo -->
+<div class="demo-description" style="clear:left;">
+<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
+</div><!-- End demo-description -->
+</body>
+</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>
	47	Master 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>
	54	Graphic 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>