Slider Class

Horizontal slide control. Can be used as a range slider, play control, etc.
Here's a simple example of how to instantiate the slider using an existing div (DOM element) and a minimal config. See config settings for a full range of options.
    var slider = new javaxt.dhtml.Slider(div, {
        units: "percent"
    });
  
Once the slider is instantiated you can call any of the public methods. You can also add event listeners by overriding any of the public "on" or "before" methods like this:
    slider.onChange = function(value){
        console.log(Math.round(value)+"%");
    };
    slider.setValue("50%");
 

Constructors

Slider( parent, config )
Used to instantiate this class
parentDOM element in which to render this component
configConfiguration settings (optional). See config options for more information.

Config Options

value
Initial value for the slider
disabled
If true, the slider will be disabled when it is initialized. The slider can be enabled and disabled using the enable() and disable() methods.
units
Used to define the unit of measure for values returned by the getValue(), onChange(), and onDrag() events. Options are "pixels" (default) and "percent".
style
Style for individual elements within the component. Note that you can provide CSS class names instead of individual style definitions.

Events

onRender( )
Called after the slider has been added to the DOM
onDrag( val )
Called whenever the slider handle is dragged by the user.
onChange( val )
Called whenever the position of the slider handle has changed.

Public Methods

enable( )
Used to enable the slider.
disable( )
Used to disable the slider.
isEnabled( )
Returns true if the slider is enabled.
isDisabled( )
Returns true if the slider is disabled.
getValue( )
Returns the value of the slider.
getPosition( )
Returns the current position of the slider, in pixels.
getWidth( )
Returns the width of the slider, in pixels.
setValue( x, silent )
Used to set the position of the slider. Note that the update will be deferred until the slider is rendered.
xA number or a string representing a percentage value (e.g. '50%'). If a number is provided and the "units" config is set to "percent", then the number will be interpreted as a percent value from 0-100. Otherwise, the number will be interpreted as pixels from the left of the slider.
silentIf true, will not fire the onChange event