组合水平的和垂直的滑块,每个都带有各自的选项,来创建一个音乐播放器的 UI。

主音量

图形均衡器

88 77 55 33 40 45 70
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 滑块(Slider) - 多个滑块</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #eq span {
    height:120px; float:left; margin:15px
  }
  </style>
  <script>
  $(function() {
    // 设置主音量
    $( "#master" ).slider({
      value: 60,
      orientation: "horizontal",
      range: "min",
      animate: true
    });
    // 设置图形均衡器
    $( "#eq > span" ).each(function() {
      // 从标记读取初始值并删除
      var value = parseInt( $( this ).text(), 10 );
      $( this ).empty().slider({
        value: value,
        range: "min",
        animate: true,
        orientation: "vertical"
      });
    });
  });
  </script>
</head>
<body>
 
<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>
  主音量
</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>
  图形均衡器
</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>
 
 
</body>
</html>