Slider

To make a slider element, you create a new instance of class Control.Slider.

Availability

script.aculo.us V1.5 and later.

Syntax

new Control.Slider('id_of_slider_handle','id_of_slider_track', [options]);

Options

Option | Since | Default | Description
axis | V1.5 | 'horizontal' | Sets the direction that the slider will move in. It should either be horizontal or vertical.
increment | V1.5 | 1 | Defines the relationship of value to pixels. Setting this to 1 will mean each movement of 1 pixel equates to 1 value.
maximum | V1.5 | length of track in pixels adjusted by increment | The maximum value that the slider will move to. For horizontal this is to the right while vertical it is down.
minimum | V1.5 | 0 | The minimum value that the slider can move to. For horizontal this is to the left while vertical it is up. Note: this also sets the beginning of the slider (zeroes it out).
alignX | V1.5 | 0 | This will move the starting point on the x-axis for the handle in relation to the track. It is often used to move the ‘point’ of the handle to where 0 should be. It can also be used to set a different starting point on the track.
alignY | V1.5 | 0 | This will move the starting point on the y-axis for the handle in relation to the track. It is often used to move the ‘point’ of the handle to where 0 should be. It can also be used to set a different starting point on the track.
sliderValue | V1.5 | 0 | Will set the initial slider value. The handle will be set to this value, assuming it is within the minimum and maxium values.
handleImage | V1.5 | (none) | The id of the image that represents the handle. This is used to swap out the image src with disabled image src when the slider is enabled.
disabled | V1.5 | (none) | This will lock the slider so that it will not move and thus is disabled.
handleDisabled | V1.5 | (none) | The id of the image that represents the disabled handle. This is used to change the image src when the slider is disabled.
values | V1.5 | (none) | Accepts an array of integers. If set these will be the only legal values for the slider to be at. Thus you can set specific slider values that the user can move the slider to.
range | ?? | (none) | Use the $R(min,max), provided by Prototype Library

The slider control offers some functions to let javascript update its state:

Function | Description
setValue | Will update the slider’s value and thus move the slider handle to the appropriate position. If you’re using multiple handles, then the id should be the second paramater (the ‘active’ (last-used?) handle is used by default) NOTE: when using setValue, the callback functions (below) are called.
setDisabled | Will set the slider to the disabled state (disabled = true).
setEnabled | Will set the slider to the enabled state (disabled = false).

Additionally, the options parameter can take the following callback function:

Callback | Description
onSlide | Called whenever the Slider is moved by dragging. The called function gets the slider value as its parameter.
onChange | Called whenever the Slider has finished moving or has had its value changed via the setValue function. The called function gets the slider value as its parameter.

With both of the above, using multiple handles causes an array of their respective values to be passed to the callback. Both receive the Slider object as a second paramater.

Examples

From the author's first demo of a vertical slider. It begins disabled.

var s2 = new Control.Slider('slider_2','track_2', {axis:'vertical',

minimum: 60, maximum:288, alignX: -28, alignY: -5, disabled: true,

handleImage: 'slider_2handle', handleDisabled: 'images/vsliderhandle_gray.gif'});

Example of a horizontal slider that allows only 4 possible values

var sliderLimited = new Control.Slider('slider_Limited','track_Limited', {

minimum:2, maximum:30, increment:9, alignX: -5, alignY: -5,

values: [2, 10, 15, 30]});

Setting the callbacks for the first example slider, referenced by "s2"

s2.options.onChange = function(value){

activeProfile.height = value;

updateBankDescription();

setResizeDesc();

$('height_value').innerHTML = value;

};

s2.options.onSlide = function(value){

vidFrame1.setHeight(value);

$('height_value').innerHTML = value;

setResizeDesc();

};

Here are some examples of disabling and setting the values outside of the slider

// continued from the above example

s2.setValue(60);

s2.setDisabled();

An easy way to convert the standard output decimal value to whole integers:

(value*100).toFixed();

Leaving minimum, maximum and increment undefined, adding this to your value handling will produce the integers 0-100.

Notes

The handle and track elements have to be loaded into the browser before the Slider instance is created. You should either place the script tags creating the slider after your elements in your HTML document, or use the body.onload callback to create the slider after everything has finished rendering.

See also - Online Slider Demo:

http://wiki.script.aculo.us/scriptaculous/show/SliderDemo