Volume Controller Slider - HTML5 CSS3 JavaScirpt

This is a very lightweight volume slider controller using HTML, CSS and JavaScript.

The most simple way of doing this is adding a range input slider:

<input type="range" min="1" max="10" value="5" id="myNumber">

Here’s a fancier solution. The visual control lets you change a JavaScript variable with a mouse click.
To try it simply click one of the bars below:

Here’s what you get with the volume slider script package

Place the code below in the HTML source of your page where you want your slider to render and call the initializer function. You can do this using the body onload event as in our example:

<body onload="drawvolumecontroller(20,35,8);">

And where you want your slider to appear on the page:

<div id="volumcontroller">
</div>
<div id="volumeindicator">
    8
</div>

The attached CSS contains just a minimalistic design, you can adjust this to match your styles:

#volumcontroller {
    height: 35px;
    width: 90px;
}
#volumcontroller div{
    height:40px;
}
.volumecontrollerbar{
    border-left:1px solid #222;
    float:right;
    width:3px;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    background-color: #4c4c4c;
    cursor:pointer;
}
.volumecontrollerbar:hover{
    background-color:#bcbcbc !important;
}

The javascript is just 20 lines long, you can find comments in the zip file offered for download at the bottom of this page.

//length: how many bars
//height: height of the tallest bar
//nowselected: which bar is selected
function drawvolumecontroller(length,height,nowselected){    
    document.getElementById("volumcontroller").innerHTML = "";
    for (i=0;i<length;i++){
        magassag = 7 + Math.round((1.4)*(length - i)); 
        margintop = height-magassag;
        if (margintop <= 0) {margintop=0;}
        if (i >= nowselected){        
            document.getElementById("volumcontroller").innerHTML = 
            document.getElementById("volumcontroller").innerHTML + 
            '<div  onmouseup="volumecontrolchanged(' + i + 
            ')" style="background-color:#898989;height:' + magassag + 
            'px;margin-top:'+margintop+'px;" class="volumecontrollerbar"></div>';
        } else {
            document.getElementById("volumcontroller").innerHTML = 
            document.getElementById("volumcontroller").innerHTML + 
            '<div  onmouseup="volumecontrolchanged(' + i + 
            ')" style="height:'+magassag+'px;margin-top:' + margintop + 
            'px;"class="volumecontrollerbar"></div>';
        }        
    }    
}
function volumecontrolchanged(newvolume){
    drawvolumecontroller(20,35,newvolume);
    document.getElementById("volumeindicator").innerHTML = newvolume;
}

The code snippets might have incorrect characters, please download the zip file to use the JavaScript volume controller slider.

Download .ZIP package
Have fun! 🙂