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