Audio EQ

by Dan Shahin

HTML

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

CSS

#eq > span {
    height:120px;
    float:left;
    margin:15px
}

JavaScript

$("#master").slider({
    value: 60,
    orientation: "horizontal",
    range: "min",
    animate: true
});
// 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"
    });
});