Nicholas Fletcher

Navigation

Slider beta

11dB
Drag the handle up and down to see it in action.

» Get the JavaScript

How-to

Adding a slider to your page can be done in 5 easy steps:

  1. Include the script in the <head> tag of your page:

    <script type="text/javascript" 
        src="/path/to/javascript/slider.js">
</script>

  2. Add an empty container div to the page:

    <div id="container"></div>

  3. Create CSS style declarations for the slider:

    div.slider div.thumb {
    background: url(images/thumb.gif) no-repeat 
                                      top left;
    width: 33px;
    height: 15px;
}
div.slider div.track {
    background: url(images/track.gif) no-repeat 
                                      top left;
    width: 19px;
    height: 91px;
}

    Your slider can be any size. The script will automatically adapt.

  4. Instantiate a Slider object with the container div id and a callback function: 

    function init() {
    var slider = new Slider("container", 
                             onSliderChange);
}

function onSliderChange(sliderValue) {
    // do something
}

  5. Call your script once the page has loaded using the onload event handler in document.body. 

    <body onload="init()">

Browser Support

The slider has been tested on:

It probably works on other browsers too. :)

Contact me




© 2006 Nicholas Fletcher XHTML CSS