jQuery UI Slider - Multiple sliders : UI Slider « jQuery « JavaScript DHTML






jQuery UI Slider - Multiple sliders

  

<!--
  jQuery UI Effects Blind 1.7.2
 
  Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
  Dual licensed under the MIT (MIT-LICENSE.txt)
  and GPL (GPL-LICENSE.txt) licenses.
 
 
-->
<!doctype html>
<html lang="en">
<head>
  <title>jQuery UI Slider - Multiple sliders</title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.slider.js"></script>
  <link type="text/css" href="js/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>

   
    
  








Related examples in the same category

1.jQuery UI Slider - Default functionality
2.jQuery UI Slider - Colorpicker
3.jQuery UI Slider - Range slider
4.jQuery UI Slider - Range with fixed maximum
5.jQuery UI Slider - Range with fixed minimum
6.jQuery UI Slider - Vertical range slider
7.jQuery UI Slider - Vertical slider
8.jQuery UI Slider - Snap to increments
9.Set step value for slider
10.Slider events: change, slide, start, stop
11.Three sliders share one event handler
12.Set the max value for slider