The Slider Widget is responsible only for managing the position of the slider button and notifying registered listeners of the relevant events. It does not specify any of the 'chrome' of the slider. That is left entirely to your discretion, thereby making the widget very flexible indeed.

Before creating a slider you need a VisualElement that represents the slider button. In the examples above, both sliders use images as their buttons. To create the Slider use the following code:

var myButton = document.createElement("IMG");
myButton.height = <height>;
myButton.width = <width>;
myButton.src = <path to image>;
myButton = new VisualElement(myButton);
var mySlider = new Slider(myButton, <type>, <Initial Position>, <top>, <right>, <bottom>, <left>);
mySlider.setVisible(true);

For details on the parameters please see the source code

To move the slider use the Slider.moveTo(x, y) method. This will move the slider button, but you are responsible for moving the rest of the chrome yourself.

To or show the slider use the Slider.setVisible(which) method. This will hide and show the slider button, but you are responsible for the rest of the chrome.

You can get the slider's current position using Slider.getPosition() and set it using Slider.setPosition(fraction).

You can register listeners on a slider using:

var Listener = new Object();
Listener.onSliderActivate = function(sliderButton) {
//Your code
}
Listener.onSliderDeActivate = function(sliderButton) {
//Your code
}
Listener.onSliderUpdate = function(sliderButton, frac) {
//Your code
}
mySlider.addActivateListener(Listener);
mySlider.addDeActivateListener(Listener);
mySlider.addUpdateListener(Listener);