script.aculo.us Slider
A slider is a kind of small track, along which you can slide a handle. It translates into a numerical value. With script.aculo.us’s slider module, you can create sliders with plenty of control.
Syntax:
new Control.Slider( handle, track, {options} );
Slider Options:
Options |
Description |
Can be used to set the axis of the slider i.e. horizontal or vertical. Defaults to horizontal. | |
Can be used to set the range of the slider. | |
Can be used to set the initial position of the slider. The default location is the initial value of the range. | |
Can be used to set the discrete values the slider can take in its range. | |
Can be used to create a slide that is initially disabled. | |
Can be used to set the value and position of the slider. | |
Can be used to disable a slider. | |
Can be used to enable a slider. |
CallBack Options:
Example:
HTML
<!DOCTYPE html> < html > < head > < script type = "text/javascript" src = "prototype.js" > </ script > < script type = "text/javascript" src = "scriptaculous.js?load = slider" > </ script > < script > window.onload = function () { new Control.Slider('handle', 'track', { range: $R(1, 100), values: [1, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100], sliderValue: 1, onSlide: function (value) { $('sliderValue').innerHTML = 'Slider Position: ' + value; } }); } </ script > < style > .track { background-color: rgb(0, 0, 0); position: relative; height: 10px; width: 200px; cursor: pointer; } .handle { background-color: #13e421; height: 20px; width: 4.25px; top: -4.25px; cursor: move; } </ style > </ head > < body > < div id = "track" class = "track " > < div id = "handle" class = "handle" style = "width: 10px;" > </ div > </ div > < p id = "sliderValue" ></ p > </ body > </ html > |
Output:
Contact Us