ejmSlider

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:

    • 400

    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:

    • 1

    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:

    • 100

    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:

    • 0

    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:

    • 0

    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>