third-party/jquery-ui-1.10.2/demos/slider/multiple-vertical.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Slider - Multiple sliders</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.core.js"></script>
   9         <script src="../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../ui/jquery.ui.mouse.js"></script>
  11         <script src="../../ui/jquery.ui.slider.js"></script>
  12         <link rel="stylesheet" href="../demos.css">
  13         <style>
  14         #eq span {
  15                 height:120px; float:left; margin:15px
  16         }
  17         </style>
  18         <script>
  19         $(function() {
  20                 // setup master volume
  21                 $( "#master" ).slider({
  22                         value: 60,
  23                         orientation: "horizontal",
  24                         range: "min",
  25                         animate: true
  26                 });
  27                 // setup graphic EQ
  28                 $( "#eq > span" ).each(function() {
  29                         // read initial values from markup and remove that
  30                         var value = parseInt( $( this ).text(), 10 );
  31                         $( this ).empty().slider({
  32                                 value: value,
  33                                 range: "min",
  34                                 animate: true,
  35                                 orientation: "vertical"
  36                         });
  37                 });
  38         });
  39         </script>
  40 </head>
  41 <body>
  42
  43 <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
  44         <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
  45         Master volume
  46 </p>
  47
  48 <div id="master" style="width:260px; margin:15px;"></div>
  49
  50 <p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
  51         <span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
  52         Graphic EQ
  53 </p>
  54
  55 <div id="eq">
  56         <span>88</span>
  57         <span>77</span>
  58         <span>55</span>
  59         <span>33</span>
  60         <span>40</span>
  61         <span>45</span>
  62         <span>70</span>
  63 </div>
  64
  65 <div class="demo-description">
  66 <p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
  67 </div>
  68 </body>
  69 </html>