Edit in JSFiddle

$(function() {
        // setup master volume
        $( "#master" ).slider({
            value: 60,
            orientation: "horizontal",
            range: "min",
            animate: true,
            slide: function(e, ui)
        // 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

<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

<div id="eq">

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

External resources loaded into this fiddle: