ejSlider

11 Jul 201818 minutes to read

The Slider provides support to select a value from a particular range as well as selects a range value. The Slider has a sliding base on which the handles are moved. There are three types of Sliders such as default Slider, min-range Slider and range Slider.

Syntax

  • JAVASCRIPT
  • $(element).ejSlider()

    Example

  • HTML
  • <div id="slider"> </div> 
     
    <script> 
    // Create Slider 
    $('#slider').ejSlider(); 
    </script>

    Requires

    • module:jQuery

    • module:jquery.easing.1.3.js

    • module:ej.core.js

    • module:ej.slider.js

    • module:ej.button.js

    Members

    allowMouseWheel boolean

    Specifies the allowMouseWheel of the slider.

    Default Value

    • false

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set allowMouseWheel API value during initialization  
    $("#slider").ejSlider({ allowMouseWheel: true});
    </script>

    animationSpeed number

    Specifies the animationSpeed of the slider.

    Default Value

    • 500

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set animationSpeed API value during initialization  
    $("#slider").ejSlider({ animationSpeed: 500});
    </script>

    cssClass string

    Specify the CSS class to slider to achieve custom theme.

    Default Value

    • ””

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set cssClass API value during initialization  
            $("#slider").ejSlider({ cssClass: "gradient-lime"});
    </script>

    enableAnimation boolean

    Specifies the animation behavior of the slider.

    Default Value

    • true

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set enableAnimation API value during initialization  
            $("#slider").ejSlider({ enableAnimation: false});
    </script>

    enabled boolean

    Specifies the state of the slider.

    Default Value

    • true

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set enabled API value during initialization  
            $("#slider").ejSlider({ enabled: false});
    </script>

    enablePersistence boolean

    Specify the enablePersistence to slider to save current model value to browser cookies for state maintains

    Default Value

    • false

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set enablePersistence API value during initialization  
            $("#slider").ejSlider({ enablePersistence: false});
    </script>

    enableRTL boolean

    Specifies the Right to Left Direction of the slider.

    Default Value

    • false

    Example

  • HTML
  • </br>
    </br>
    <div id="slider"> </div> 
    <script>
    //To set enableRTL API value during initialization  
            $("#slider").ejSlider({ enableRTL: false});
    </script>

    height string

    Specifies the height of the slider.

    Default Value

    • 14

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set height API value during initialization  
            $("#slider").ejSlider({ height: 14});
    </script>

    htmlAttributes object

    Specifies the HTML Attributes of the ejSlider.

    Default Value

    • {}

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set htmlAttributes API value during initialization  
            $("#slider").ejSlider({ htmlAttributes: {disabled:"disabled"}});
    </script>

    incrementStep number

    Specifies the incremental step value of the slider.

    Default Value

    • 1

    Example

  • HTML
  • </br>
    </br>
    <div id="slider"> </div> 
    <script>
    //To set incrementStep API value during initialization  
            $("#slider").ejSlider({ incrementStep: 2});
    </script>

    largeStep number

    Specifies the distance between two major (large) ticks from the scale of the slider.

    Default Value

    • 10

    Example

  • HTML
  • </br>
    </br>
    <div id="slider"> </div> 
    <script>
    //To set largeStep API value during initialization  
            $("#slider").ejSlider({ largeStep: 2});
    </script>

    maxValue number

    Specifies the ending value of the slider.

    Default Value

    • 100

    Example

  • HTML
  • </br>
    </br>
    <div id="slider"> </div> 
    <script>
    //To set maxValue API value during initialization  
            $("#slider").ejSlider({ maxValue: 60});
    </script>

    minValue number

    Specifies the starting value of the slider.

    Default Value

    • 0

    Example

  • HTML
  • </br>
    </br>
    <div id="slider"> </div> 
    <script>
    //To set minValue API value during initialization  
            $("#slider").ejSlider({ minValue: 0});
    </script>

    orientation enum

    Specifies the orientation of the slider.

    Name Description
    Horizontal Used to set horizontal organizational chart orientation
    Vertical Used to set vertical organizational chart orientation

    Default Value

    • ej.orientation.Horizontal

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set orientation API value during initialization
    $("#slider").ejSlider({ orientation: ej.Orientation.Vertical});
    </script>

    readOnly boolean

    Specifies the readOnly of the slider.

    Default Value

    • false

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set readOnly API value during initialization  
            $("#slider").ejSlider({ readOnly: true});
    </script>

    showButtons boolean

    Shows/Hides the increment and decrement buttons of the slider.

    Default Value

    • false

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set showButtons API value during initialization
            $("#slider").ejSlider({ showButtons: true});
    </script>

    showRoundedCorner boolean

    Specifies the rounded corner behavior for slider.

    Default Value

    • false

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set showRoundedCorner API value during initialization  
            $("#slider").ejSlider({ showRoundedCorner: true});
    </script>

    showScale boolean

    Shows/Hide the major (large) and minor (small) ticks in the scale of the slider.

    Default Value

    • false

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set enabled API value during initialization
            $("#slider").ejSlider({ showScale: false});
    </script>

    showSmallTicks boolean

    Specifies the small ticks from the scale of the slider.

    Default Value

    • true

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set showSmallTicks API value during initialization  
            $("#slider").ejSlider({ showSmallTicks: false});
    </script>

    showTooltip boolean

    Specifies the showTooltip to shows the current Slider value, while moving the Slider handle or clicking on the slider handle of the slider.

    Default Value

    • true

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set showTooltip API value during initialization  
            $("#slider").ejSlider({ showTooltip: true});
    </script>

    sliderType enum

    Specifies the sliderType of the slider.

    Name Description
    Default Shows default slider
    MinRange Shows minRange slider
    Range Shows Range slider

    Default Value

    • ej.SliderType.Default

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set sliderType API value during initialization
    $("#slider").ejSlider({ sliderType: ej.SliderType.Default});
    </script>

    smallStep number

    Specifies the distance between two minor (small) ticks from the scale of the slider.

    Default Value

    • 1

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set smallStep API value during initialization  
            $("#slider").ejSlider({ smallStep: 2});
    </script>

    value number

    Specifies the value of the slider. But it’s not applicable for range slider. To range slider we can use values property.

    Default Value

    • 0

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set value API  during initialization
            $("#slider").ejSlider({ value: 60});
    </script>

    values array

    Specifies the values of the range slider. But it’s not applicable for default and minRange sliders. we can use value property for default and minRange sliders.

    Default Value

    • [minValue,maxValue]

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set values API during initialization
            $("#slider").ejSlider({ values: [30,60]});
    </script>

    width string

    Specifies the width of the slider.

    Default Value

    • 100%

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //To set width API value during initialization
            $("#slider").ejSlider({ width: "300px"});
    </script>

    Methods

    disable()

    To disable the slider

    Example

  • HTML
  • <div id="slider"> </div> 
     
    <script>
    $("#slider").ejSlider();
    // Create slider control object
    var sliderObj = $("#slider").data("ejSlider");
    sliderObj.disable(); // disable the slider control
    </script>
  • HTML
  • <div id="slider"> </div> 
     
    <script>
    $("#slider").ejSlider();
    // disable the slider control
    $("#slider").ejSlider("disable");
    </script>

    enable()

    To enable the slider

    Example

  • HTML
  • <div id="slider"> </div> 
     
    <script>
    $("#slider").ejSlider();
    // Create slider control object
    var sliderObj = $("#slider").data("ejSlider");
    sliderObj.enable(); // enable the slider control
    </script>
  • HTML
  • <div id="slider"> </div> 
     
    <script>
    $("#slider").ejSlider();
    // enable the slider control
    $("#slider").ejSlider("enable");
    </script>

    getValue()

    To get value from slider handle

    Returns:

    number

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    $("#slider").ejSlider();
    // Create slider control object
    var sliderObj = $("#slider").data("ejSlider");
    sliderObj.getValue(); // get value from the slider handle
    </script>
  • HTML
  • <div id="slider"> </div> 
     
    <script>
    $("#slider").ejSlider();
    // get value from slider handle
    $("#slider").ejSlider("getValue");
    </script>

    setValue(value ,[enableAnimation])

    To set value to slider handle.By default animation is false while set the value. If you want to enable the animation, pass the enableAnimation as true to this method.

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    $("#slider").ejSlider();
    // Create slider control object
    var sliderObj = $("#slider").data("ejSlider");
    sliderObj.setValue(10); // set value to the slider handle
    </script>
  • HTML
  • <div id="slider"> </div> 
    <script>
    $("#slider").ejSlider();
    // Create slider control object
    var sliderObj = $("#slider").data("ejSlider");
    sliderObj.setValue(30, true); // enable the slider animation 
    </script>
  • HTML
  • <div id="slider"> </div> 
     
    <script>
    $("#slider").ejSlider();
    // set value to slider handle
    $("#slider").ejSlider("setValue",10);
    </script>

    Events

    change

    Fires once Slider control value is changed successfully.

    Name Type Description
    argument Object Event parameters from slider control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    sliderIndex number returns current handle number or index
    id string returns slider id.
    model object returns the slider model.
    type string returns the name of the event.
    value number returns the slider value.
    isInteraction boolean returns true if event triggered by interaction else returns false.

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //change event for slider control
    $("#slider").ejSlider({
       change: function (args) {}
    });
    </script>

    create

    Fires once Slider control has been created successfully.

    Name Type Description
    argument Object Event parameters from slider control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the slider model
    type string returns the name of the event

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //create event for slider control
    $("#slider").ejSlider({
       create: function (args) {}
    });
    </script>

    destroy

    Fires when Slider control has been destroyed successfully.

    Name Type Description
    argument Object Event parameters from slider control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the slider model
    type string returns the name of the event

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //destroy event for slider control
    $("#slider").ejSlider({
       destroy: function (args) {}
    });
    </script>

    renderingTicks

    Fires before creating each slider scale tick. You can use this event to add custom text in tick values.

    Name Type Description
    argument Object Event parameters from slider control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    value number returns slider tick value
    valueType string returns the value type either tooltip or label value
    tick object returns the current Li element

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    // renderingTicks for slider
    $("#slider").ejSlider({
       showScale : true,
       renderingTicks: function (args) {
               args.value = "$" + args.value;           
       }
    });
    </script>

    slide

    Fires once Slider control is sliding successfully.

    Name Type Description
    argument Object Event parameters from slider control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    sliderIndex number returns current handle number or index
    id string returns slider id
    model object returns the slider model
    type string returns the name of the event
    value number returns the slider value

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //slide event for slider control
    $("#slider").ejSlider({
       slide: function (args) {}
    });
    </script>

    start

    Fires once Slider control is started successfully.

    Name Type Description
    argument Object Event parameters from slider control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    sliderIndex number returns current handle number or index
    id string returns slider id
    model object returns the slider model
    type string returns the name of the event
    value number returns the slider value

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //start event for slider control
    $("#slider").ejSlider({
       start: function (args) {}
    });
    </script>

    stop

    Fires when Slider control is stopped successfully.

    Name Type Description
    argument Object Event parameters from slider control
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    sliderIndex number returns current handle number or index
    id string returns slider id
    model object returns the slider model
    type string returns the name of the event
    value number returns the slider value

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //stop event for slider control
    $("#slider").ejSlider({
       stop: function (args) {}
    });
    </script>

    tooltipChange

    Fires when display the custom tooltip.

    Name Type Description
    argument Object Event parameters from slider control
    Name Type Description
    cancel boolean returns the cancel option value.
    id string returns slider id.
    isInteraction boolean returns true if event triggered by interaction else returns false.
    model object returns the slider model.
    sliderIndex number returns current handle number or index
    type string returns the name of the event.
    value number returns the slider value.

    Example

  • HTML
  • <div id="slider"> </div> 
    <script>
    //tooltipChange event for slider control
    $("#slider").ejSlider({
       tooltipChange: function (args) {}
    });
    </script>