EQ Band

Equalizer

by James Doyle

HTML

<div class="slider">
    <div class="knob"></div>
    <br />
    <div class="value">0</div>
</div>

<div class="slider">
    <div class="knob"></div>
    <br />
    <div class="value">0</div>
</div>

<div class="slider">
    <div class="knob"></div>
    <br />
    <div class="value">0</div>
</div>

CSS

body {
    margin: 20px;
    background: #e1e1e1;
}
.slider {
    float:left;
    margin-right: 15px;
    width: 5px;
    height: 150px;
    background: #333;
    box-shadow: inset 2px 2px 2px #000;
    border: 1px solid #444;
    border-radius: 3px;
}

.knob {
    cursor: pointer;
    width: 11px;
    height: 11px;
    background: #eee;
    border: 1px solid #ddd;
    position: relative;
    top: 0px;
    left: -4px;
    border-radius: 4px;
}
.knob:before {
    content:'';
    display:block;
    position: relative;
    z-index: 10;
    top: 3px;
    left: 3px;
    height: 5px;
    width: 5px;
    background: #333;
    border-radius: 3px;
}

.value {
    position: relative;
    top: 120px;
    left: -4px;
    z-index: 20;
    text-align: center;
    width: 14px;
    font-size: 10px;
}

JavaScript

$('.slider').bind('click', function(e) {
    var k = $(this).children('.knob');
    k.css('top', e.clientY - 25);
    k.top = parseInt(k.css('top'),10);
    $(this).children('.value').html(k.top);
});