Scriptaculous Slider Demo

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 cursor: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.