ejmSlider

5 Jun 202320 minutes to read

The Essential JavaScript Mobile Slider widget provides support to select a value from a particular range as well as a range of value.

Custom Design for Html slider control:

$(element).ejmSlider()

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="slider" data-role="ejmslider"></div>

HTML

<!-- Obtrusive way of rendering -->
<div id="slider"></div>
    <script>
        // Create slider
        $(function () {
            $("#slider").ejmSlider();
        });
    </script>

Requires

module:jQuery
module:ej.mobile.application
module:ej.core
module:ej.unobtrusive
module:ej.mobile.core
module:ej.data
module:ej.touch

Members

animationSpeed `Int`

Specifies the animation speed when animation is enabled.

Default Value:

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-animationspeed=1000 data-ej-enableanimation=true></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        $(function () {
            $("#slider").ejmSlider({ enableAnimation: true, animationSpeed: 1000 });
        });
    </script>

enableAnimation `Boolean`

Specifies whether to enable the animation.

Default Value:

false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-enableanimation=true></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        $(function () {
            $("#slider").ejmSlider({ enableAnimation: false });
        });
    </script>

enabled `Boolean`

Specifies whether to enable or disable the control.

Default Value:

true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-enabled=false></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        $(function () {
            $("#slider").ejmSlider({ enabled: false });
        });
    </script>

enablePersistence `Boolean`

Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

Default Value:

false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-enablepersistence=false></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        $(function () {
            $("#slider").ejmSlider({ enablePersistence: false });
        });
    </script>

enableRange `Boolean`

Specifies whether to enable the range slider.

Default Value:

false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-enablerange=true></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        // Set slider enableRange on initialization.
        //To set enableRange API value
        $(function () {
            $("#slider").ejmSlider({ enableRange: true });
        });
    </script>

incrementStep `Int`

Specifies the step value for increment.

Default Value:

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-incrementstep=1></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        // Set slider incrementStep on initialization.
        //To set incrementStep API value
        $(function () {
            $("#slider").ejmSlider({ incrementStep: 1 });
        });
    </script>

ios7

Section for ios7 mode specific functionalities.

ios7.thumbStyle `Enum`

Specifies the thumb style in ios7 mode. SeeThumbStyle

Default Value:

ej.mobile.Slider.ThumbStyle.Normal.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-rendermode="ios7" data-ej-ios7-thumbstyle="small"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        $(function () {
            $("#slider").ejmSlider({ renderMode: "ios7", ios7: { thumbStyle: ej.mobile.Slider.ThumbStyle.Small } });
        });
    </script>

maxValue `Int`

Specifies the maximum value.

Default Value:

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-maxvalue=100></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        $(function () {
            $("#slider").ejmSlider({ maxValue: 100 });
        });
    </script>

minValue `Int`

Specifies the minimum value.

Default Value:

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-minvalue=0></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        $(function () {
            $("#slider").ejmSlider({ minValue: 0 });
        });
    </script>

orientation `Enum`

Specifies whether the orientation is horizontal or vertical. SeeOrientation

Default Value:

ej.mobile.Slider.Orientation.Horizontal.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-orientation="vertical"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        $(function () {
            $("#slider").ejmSlider({ orientation: ej.mobile.Slider.Orientation.Vertical });
        });
    </script>

readOnly `Boolean`

Specifies whether the control is read only.

Default Value:

false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-readonly=true></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        $(function () {
            $("#slider").ejmSlider({ readOnly: true });
        });
    </script>

renderMode `Enum`

Specifies the rendering mode of the control. SeeRenderMode

Default Value:

auto

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-rendermode="auto"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>	
    <script>
        $(function () {
            $("#slider").ejmSlider({ renderMode: ej.mobile.RenderMode.Android });
        });
    </script>

value `Int`

Specifies the current value.

Default Value:

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-value=30></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        $(function () {
            $("#slider").ejmSlider({ value: 50 });
        });
    </script>

values `Int[]`

Specifies the values when range slider is enabled.

Default Value:

[20,80]

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="slider" data-role="ejmslider" data-ej-enablerange=true data-ej-values=[20,80]></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="slider"></div>
    <script>
        $(function () {
            $("#slider").ejmSlider({ enableRange: true, values: [20, 80] });
        });
    </script>

Methods

getValue()

To get the current value.

Example

HTML

<div id="slider"></div>
    <script>
        // get the slider's current value        
        $(function () {
            $("#slider").ejmSlider();
            $("#slider").ejmSlider("getValue");
        });
    </script>

Events

change

Event triggers when the value changed.

Name

Type

Description

argument

Object

Event parameters from slider.

Name	Type	Description
cancel	boolean	if the event should be cancelled; otherwise, false.
type	string	returns the name of the event.
model	Object	returns the model value of the control.
value	int	returns the current value of the control.

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="slider" data-role="ejmslider" data-ej-change="onChange"></div>
    <script>
        // Change event for slider
        function onChange(args) { //handle the event            
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<div id="slider"></div>
    <script>
        //change event for slider
        $(function () {
            $("#slider").ejmSlider({
                change: function (args) { //handle the event                    
                }
            });
        });
    </script>

load

Event triggers before the control get loaded.

Name

Type

Description

argument

Object

Event parameters from slider.

Name	Type	Description
cancel	boolean	returns true if the event should be cancelled; otherwise, false.
type	string	returns the name of the event.
model	Object	returns the model value of the control.
value	int	returns the current value of the control.
values	int[]	returns the current range values of the control when range slider feature is enabled.

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="slider" data-role="ejmslider" data-ej-load="onLoad"></div>
    <script>
        // Load event for slider
        function onLoad(args) { //handle the event            
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<div id="slider"></div>
    <script>
        //Load event for slider
        $(function () {
            $("#slider").ejmSlider({
                load: function (args) { //handle the event
                }
            });
        });
    </script>

slide

Event triggers when touch move happens on the control.

Name

Type

Description

argument

Object

Event parameters from slider.

Name	Type	Description
cancel	boolean	Returns true if the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
value	int	Returns the current value of the control.
values	int[]	Returns the current range values of the control when range slider feature is enabled.

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="slider" data-role="ejmslider" data-ej-slide="onslide"></div>
    <script>
        // slide event for slider
        function onslide(args) { //handle the event            
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<div id="slider"></div>
    <script>
        //Slide event for slider
        $(function () {
            $("#slider").ejmSlider({
                slide: function (args) { //handle the event                    
                }
            });
        });
    </script>

touchEnd

Event triggers when touch end happens on the control.

Name

Type

Description

argument

Object

Event parameters from slider.

Name	Type	Description
cancel	boolean	If the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
value	int	Returns the current value of the control.

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="slider" data-role="ejmslider" data-ej-touchend="onStop"></div>
    <script>
        // touchEnd event for slider
        function onStop(args) { //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<div id="slider"></div>
    <script>
        //touchEnd event for slider
        $(function () {
            $("#slider").ejmSlider({
                touchEnd: function (args) { //handle the event               
                }
            });
        });
    </script>

touchStart

Event triggers when touch start happens on the control.

Name

Type

Description

argument

Object

Event parameters from slider.

Name	Type	Description
cancel	boolean	If the event should be cancelled; otherwise, false.
type	string	Returns the name of the event.
model	Object	Returns the model value of the control.
value	int	Returns the current value of the control.

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="slider" data-role="ejmslider" data-ej-touchstart="onStart"></div>
    <script>
        // touchStart event for slider
        function onStart(args) { //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<div id="slider"></div>
    <script>
        //touchStart event for slider
        $(function () {
            $("#slider").ejmSlider({
                touchStart: function (args) { //handle the event                    
                }
            });
        });
    </script>

ejmSlider

Example

Requires

Members

animationSpeed Int

Default Value:

Example

enableAnimation Boolean

Default Value:

Example

enabled Boolean

Default Value:

Example

enablePersistence Boolean

Default Value:

Example

enableRange Boolean

Default Value:

Example

incrementStep Int

Default Value:

Example

ios7

ios7.thumbStyle Enum

Default Value:

Example

maxValue Int

Default Value:

Example

minValue Int

Default Value:

Example

orientation Enum

Default Value:

Example

readOnly Boolean

Default Value:

Example

renderMode Enum

Default Value:

Example

value Int

Default Value:

Example

values Int[]

Default Value:

Example

Methods

getValue()

Example

Events

change

Example

load

Example

slide

Example

touchEnd

Example

touchStart

Example

animationSpeed `Int`

enableAnimation `Boolean`

enabled `Boolean`

enablePersistence `Boolean`

enableRange `Boolean`

incrementStep `Int`

ios7.thumbStyle `Enum`

maxValue `Int`

minValue `Int`

orientation `Enum`

readOnly `Boolean`

renderMode `Enum`

value `Int`

values `Int[]`