Print article

JavaScript volume slider control

javascript volume control slider JavaScript volume slider control
The Rubik’s Cube solver program has got a new speed controller, looking like a classic JavaScript volume slider control. I couldn’t find something like this out there so I had to make my own. It came out pretty nice, it’s simple and very customizable.

See the live demo



zipped file JavaScript volume slider controlI’m sharing here the code for the controller, and you can download a zip file which is ready to be used out of the box. Just click on the picture. It’s using HTML + JavaScript + CSS. I tested it with ie 7,8,9, Google Chrome, Mozzilla, and the other major browsers and there was no problem with it.

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

Put in the HTML code two div tags where you want your slider to be shown and call the initializer function. You can do this in the body onload

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

And where you want your slider to appear:

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

The attached CSS contains just a few styles, but probably you will modify these:

#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 downloaded zip file.

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

Have fun! icon smile JavaScript volume slider control

Recent Posts

Topic index

Share this page

Source of this document: WWW.RUWIX.COM
© 2012 Ruwix