iTunes volume bar with HTML5 slider

by dine

HTML

<input type="range" min="0" max="10" step="0.1" value="5" class="volume_btn">

CSS

body {
    background: #ddd;
    padding: 30px;  
}
input[type=range], input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
}

input[type=range] {
    border-radius: 6px;
    height: 9px;
    width: 120px;
    background: -webkit-linear-gradient(top, #999, #b2b2b2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.25);
    border: 1px solid #777;
}
    input[type=range]::-webkit-slider-thumb {
        background: url('http://ttb.li/fpog8b');
        width: 17px;
        height: 19px;
        cursor: pointer;
    }