Scriptaculous Slider Demo
Standard horizontal slider
Vertical slider
Slider with predefined values [0,50,100,150,200]
Slider with predefined values [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] and interactions with div area
Available Options.
- axis: (horizontal or vertical)
- increment:
- step:
- alignX – will move the handle so that it aligns properly on the track. This will move it x pixels on the x-axis.
- alignY – will move the handle so that it aligns properly on the track. This will move it x pixels on the y-axis.
- disabled – will set the slider’s state to being ‘locked’ and thus won’t respond to input.
- maximum:
- minimum:
- sliderValue:
- handleImage:
- handleDisabled:
- values: [10, 20, 30, 40];
- onSlide:
- onChange:
Another easy addition is to add a cursor: move CSS rule on the slider, the default text cursor gives less feedback as to what is going on, and this would compensate for a sometimes laggy slider. Even better, use cursosr:ns-resize, or ew-resize as appropriate. I know this is obvious, but thought here was the place to do it.
Some other obvious note: put the javascript after the body. If you put the javascript right after the slider divs, it will work in firefox, but IE will start doing weird bugs.
Showing changes from revision #8 to #9:
Added | Removed
Standard horizontal slider
Vertical slider
Slider with predefined values [0,50,100,150,200]
Slider with predefined values [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20] and interactions with div area
Available Options.
- axis: (horizontal or vertical)
- increment:
- step:
- alignX – will move the handle so that it aligns properly on the track. This will move it x pixels on the x-axis.
- alignY – will move the handle so that it aligns properly on the track. This will move it x pixels on the y-axis.
- disabled – will set the slider’s state to being ‘locked’ and thus won’t respond to input.
- maximum:
- minimum:
- sliderValue:
- handleImage:
- handleDisabled:
- values: [10, 20, 30, 40];
- onSlide:
- onChange:
Another easy addition is to add a cursor: move CSS rule on the slider, the default text cursor gives less feedback as to what is going on, and this would compensate for a sometimes laggy slider. Even better, use cursosr:ns-resize, or ew-resize as appropriate. I know this is obvious, but thought here was the place to do it.
Some other obvious note: put the javascript after the body. If you put the javascript right after the slider divs, it will work in firefox, but IE will start doing weird bugs.