Slider Class

Show Source

Basic horizontal slide control. Can be used as a range slider, play control, etc. Supports touch devices. Credit: http://css3wizardry.com/2010/09/14/range-slider-with-css-and-javascript/

Constructors

Slider( parent, config )

Show Source

Used to instantiate this class

parent	DOM element in which to render this component
config	Configuration settings (optional). See config options for more information.

Config Options

value

Initial value for the slider

Show Source

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.

Show Source

style

Style for individual elements within the component. Note that you can provide CSS class names instead of individual style definitions.

Show Source

Events

onRender( )

Called after the slider has been added to the DOM

Show Source

onDrag( val )

Called whenever the slider handle is dragged by the user.

Show Source

onChange( val )

Called whenever the position of the slider handle has changed.

Show Source

Public Methods

enable( )

Used to enable the slider.

Show Source

disable( )

Used to disable the slider.

Show Source

isEnabled( )

Returns true if the slider is enabled.

Show Source

isDisabled( )

Returns true if the slider is disabled.

Show Source

getValue( returnPercentage )

Returns the value of the slider.

returnPercentage

Optional. If true, returns a percentage value. Otherwise, returns the current position of the slider in pixels.

Show Source

getWidth( )

Returns the width of the slider. This, together with the getValue() method, can be used to compute a percentage value.

Show Source

setValue( x, silent )

Used to set the position of the slider.

x	Accepts a number representing pixels from the left or a string representing a percentage value (e.g. '50%')
silent	If true, will not fire the onChange event

Show Source