Moobile.Slider

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:

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


thumbElement

The element used to create this slider's thumb.

Type


rangeElement

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

Type


valueElement

The element that defines the second color of this slider.

Type

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:

Example:

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

getValue()

Returns this slider's current value.

Returns:

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:


getMinimum()

Returns this slider's minimum value.

Returns:


setMaximum(maximum)

Sets this slider's maximum value.

Parameters:

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

Returns:


getMaximum()

Returns this slider's maximum value.

Returns:


refresh()

Refreshes the measures of this slider.

Returns:

Table of Contents