Moobile.Slider

Moobile.Slider

599 557 ThomasEngels
Extends Moobile.Control

Provides an horizontal slider control.

Initialization

Syntax:

var slider = new Moobile.Slider([element], [options], [name]);

Parameters:

Name Type Description
element Optional Element The slider’s element, element id or html string.
options Optional Object The slider’s options, see below.
name Optional String The slider’s name.

Options:

Name Type Description
className String The slider’s extended CSS class name, defaults to null.
styleName String The slider’s default style, defaults to null.
tagName String The slider’s element tag name, defaults to div.
value Number The slider’s initial value.
snap Boolean Whether to snap to each values.
mode String The slider’s mode, either horizontal or vertical, defaults to horizontal.
minimum Number The slider’s minimum value, defaults to 0.
maximum Number The slider’s maximum value, defaults to 100.

Generates:

<div class="slider">
    <div class="slider-track">
        <div class="slider-thumb"></div>
    </div>
</div>

Subclassing Notes:

This class overrides the following method:

  • willBuild: Call the parent method at the top of your implementation if you override this method.
  • didBuild: Call the parent method at the top of your implementation if you override this method.
  • didBecomeReady: Call the parent method at the top of your implementation if you override this method.
  • destroy : Call the parent method at the bottom of your implementation if you override this method.

Defined roles:

Name Description Applies to Note
slider Defines an element acting as a Moobile.Slider control All components Use the data-slider attribute to specify a subclass instead

Examples:

Specifying an element that acts a slider control using the data-role attribute:
<div data-role="slider"></div>
Specifying an element that acts a slider control subclass using the data-role attribute:
<div data-role="button" data-button="MySlider"></div>

Events

change

Fired when this slider’s value change either by setting the value manually or by moving this slider’s thumb.

Members

trackElement

The element that defines this slider’s movable area.

Type

  • Element

thumbElement

The element used to create this slider’s thumb.

Type

  • Element

rangeElement

The element that defines this slider’s value movable area.

Type

  • Element

valueElement

The element that defines the second color of this slider.

Type

  • Element

Methods

setValue(value)

Sets this slider’s value and move it’s thumb element to the proper position.

Parameters:

Name Type Description
value Number This slider’s value.

Returns:

  • Moobile.Slider This Moobile.Slider instance.

Example:

var slider = new Moobile.Slider();
slider.setValue(50);

getValue()

Returns this slider’s current value.

Returns:

  • Number The current value.

Example:

var slider = new Moobile.Slider();
slider.setValue(50);
slider.getValue(); // returns 50

setMinimum(minimum)

Sets this slider’s minimum value.

Parameters:

Name Type Description
minimum Number This slider’s minimum value.

Returns:

  • Moobile.Slider This Moobile.Slider instance.

getMinimum()

Returns this slider’s minimum value.

Returns:

  • Number The minimum value.

setMaximum(maximum)

Sets this slider’s maximum value.

Parameters:

Name Type Description
maximum Number This slider’s maximum value.

Returns:

  • Moobile.Slider This Moobile.Slider instance.

getMaximum()

Returns this slider’s maximum value.

Returns:

  • Number The maximum value.

refresh()

Refreshes the measures of this slider.

Returns:

  • Moobile.Slider This Moobile.Slider instance.