OVIDIU CHERECHEȘ

dev / 

JavaScript Slider

• web
• javascript
• slider
• component

This script is no longer under development! Please follow this link for an updated, open-source version of this script, called Dragdealer: ovidiu.ch/dragdealer-js.

Since the comment slider-button drew some attention among the visitors, I figured I'd begin my technical input by presenting (and sharing) the slider script; which turned out to be quite a component. It can be used in many ways – be my guest.

Here is a demo page that exhibits some potential scenarios. Below you have all the info you need in order to use it: its definition, options and methods. Also, of course, the files to download.

Constructor

/*
HTML code
<div id="my-slider" class="slider">
    <div class="handle">drag me</div>
</div>
Initializing the Slider
*/
new Slider('my-slider', {
    callback: function(value) {
        alert(value);
    }
});

Slider Slider(Mixed wrapper [, Object options ])

• Mixed wrapper - This can be the Slider's HTML id, or the actual element itself if you have it "at hand"
• Object options - Supported options (below)

Options

/*
Setting options
*/
new Slider('my-slider', {
    value: 1,
    steps: 5,
    snapping: true,
    callback: function(value) {
       // do something
    }
});

• Boolean disabled - Initial state; default: false
• Number value - Initial value [0,1]; default: 0
• Number steps - Amount of steps to limit to (less than 2 means no steps); default: 0
• Boolean snapping - Snapping to steps (if set); default: false
• Function callback - Callback function (on release); default: null
• Function animation_callback - Animation callback function (on move); default: null
• Number speed - Sliding speed of the handle; default: 5
• Number pleft, pright - Left and/or right padding for the rail *; default: 0

* If you want the padding to be equal in both left and right side, you can set it from CSS.

Methods

/*
Using methods
*/
var slider = new Slider('my-slider');
slider.disable();
slider.enable();
slider.setValue(0.2);
slider.setValue(1, true);

• enable() - Enable user interaction
• disable() - Disable user interaction
• setValue(Number value [, Boolean snap = false ]) - Set the specified value, with the ability to slide or to snap directly

In case you're wondering, yes, you can easily change the shape and look of the slider, with modest CSS skills. Just look through the CSS file from the archive and you'll know what I mean.

Let me know if you stumbled across any problem with the script, or, even better, if you have a cool implementation of it to share. Looking forward.

• javascript-slider.zip

© March 2010 Ovidiu Cherecheș