Edit in JSFiddle

$(function() {
        // setup master volume
        $( "#master" ).slider({
            value: 60,
            orientation: "horizontal",
            range: "min",
            animate: true,
            slide: function(e, ui)
            {
                $('#value').text(ui.value);
            }
        });
        // setup graphic EQ
        $( "#eq > span" ).each(function() {
            // read initial values from markup and remove that
            var value = parseInt( $( this ).text(), 10 );
            $( this ).empty().slider({
                value: value,
                range: "min",
                animate: true,
                orientation: "vertical"
            });
        });
    });

<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>

    <p id="value"></p>
    
</div><!-- End demo -->

#demo-frame > div.demo { padding: 10px !important; }
    #eq span {
        height:120px; float:left; margin:15px
    }

#value {
  clear: both;
    padding: 15px;
    background: #ddd;
}