Megoldás forráskódja

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Equalizer</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-10-04" />
      <meta name="revised" content="Tóth Péter, 04/10/2012" />
      <meta name="description" content="jQuery UI - Equalizer" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <style type="text/css">
         .equalizer{
            height:120px;
            margin:14px;
            }
         #idEqualizer>div{
            display:inline-block;
            text-align:center;
            }
      </style>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
      <script type="text/javascript">
         <!--
         $(document).ready(function(){
            // Beállítjuk a slider elemeket
            $(".equalizer").each(function(){
               // Az adott elem előtti SPAN elem értékének kiolvasása (kezdő érték)
               var iErtek=parseInt($(this).prev("span").text(),10);
               // Csúszka létrehozása
               $(this).slider({
                  // Kezdő érték beállítása
                  value:iErtek,
                  range:"min",
                  animate:true,
                  // Függőleges elrendezés
                  orientation:"vertical",
                  // CSúszka módosítása esetén a csúszka értékének visszaírása a SPAN TAG-be
                  slide:function(event,ui){
                     $(this).prev("span").html(ui.value);
                     }
                  });
               });
            });
         -->
      </script>
   </head>
   <body>
      <div id="idEqualizer">
         <div><span>88</span><div class="equalizer"></div></div>
         <div><span>77</span><div class="equalizer"></div></div>
         <div><span>55</span><div class="equalizer"></div></div>
         <div><span>33</span><div class="equalizer"></div></div>
         <div><span>40</span><div class="equalizer"></div></div>
         <div><span>45</span><div class="equalizer"></div></div>
         <div><span>70</span><div class="equalizer"></div></div>
      </div>
   </body>
</html>