Creates a slider with two elements: a knob and a container.

• Slider requires the page to be in Standards Mode.

var mySlider = new Slider(element, knob[, options]);

1. element - (element) The knob element for the slider.
2. knob - (element) The handle element for the slider.
3. options - (object) An optional object for customizing the Slider.

1. snap - (boolean: defaults to false) True if you want the knob to snap to the nearest value.
2. offset - (number: defaults to 0) Relative offset for knob position at start.
3. range - (mixed: defaults to false) Array of numbers or false. The minimum and maximum limits values the slider will use.
4. wheel - (boolean: defaults to false) True if you want the ability to move the knob by mousewheeling.
5. steps - (number: defaults to 100) The number of steps the Slider should move/tick.
6. mode - (string: defaults to horizontal) The type of Slider can be either 'horizontal' or 'vertical' in movement.

• Range option allows an array of numbers. Numbers can be negative and positive.

• (function) Fires when the Slider's value changes.

onChange(step)

1. step - (number) The current step that the Slider is on.

• (function) Fire when you're done dragging.

onComplete(step)

1. step - (string) The current step that the Slider is on as a string.

• (function) Fires when the user drags the knob. This Event can be overriden to alter the tick behavior.

onTick(pos)

1. pos - (number) The current position that slider moved to.

• Slider originally uses the 'tick' event to set the style of the knob to a new position.

• (object) A new Slider instance.

var mySlider = new Slider('myElement', 'myKnob', {
    range: [-50, 50],
    wheel: true,
    snap: true,
    onTick: function(pos){
        this.element.setStyle('border-color', '#f00');
        this.knob.setStyle(this.property, pos);
    },
    onComplete: function(){
        this.element.tween('border').start('#000');
    }
});

The slider will move to the passed position.

mySlider.set(step);

1. step - (number) A number to position the Slider to.

• (object) This Slider instance.

var mySlider = new Slider('myElement', 'myKnob');
mySlider.set(0);

var myPeriodical = (function(){
    if (this.step == this.options.steps) $clear(myPeriodical);
        this.set(this.step++);
}).periodical(1000, mySlider);

• Step will automatically be limited between 0 and the optional steps value.

Attaches the mouse listeners to the Slider making the Slider draggable

mySlider.attach();

• (object) This Slider instance.

var mySlider = new Slider('myElement', 'myKnob');
mySlider.detach();
myElement.addEvent('click', function(){
    mySlider.attach();
    alert('Slider enabled!');
});

• You only need to use this method when you manually detached the mouse listeners before.

• Slider:detach, [Element:addEvent][]

Detaches the mouse listeners from the Slider so its value can't be changed any longer

mySlider.detach();

• (object) This Slider instance.

var mySlider = new Slider('myElement', 'myKnob');
myElement.addEvent('click', function(){
    mySlider.detach();
    alert('Slider disabled!');
});

• Slider:attach, [Element:removeEvent][]