ejSlider

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

  • html
  • <ej-slider id="slider"></ej-slider>

    Example

  • html
  • <ej-slider id="slider"></ej-slider>
  • ts
  • export class AppComponent {    
            constructor(){}
     }

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.slider.js

    Members

    allowMouseWheel boolean

    Specifies the allowMouseWheel of the slider.

    Default Value

    • false

    Example

  • html
  • <ej-slider id="slider" [allowMouseWheel]="true"></ej-slider>

    animationSpeed number

    Specifies the animationSpeed of the slider.

    Default Value

    • 500

    Example

  • html
  • <ej-slider id="slider" [animationSpeed]="animationSpeed"></ej-slider>
  • ts
  • export class AppComponent { 
            animationSpeed: number;
            constructor(){
                    this.animationSpeed = 500;
            }
     }

    cssClass string

    Specify the CSS class to slider to achieve custom theme.

    Default Value

    • ””

    Example

  • html
  • <ej-slider id="slider" [cssClass]="customCss"></ej-slider>
  • ts
  • export class AppComponent { 
            customCss: string;
            constructor(){
                    this.customCss = "gradient-lime";
            }
     }

    enableAnimation boolean

    Specifies the animation behavior of the slider.

    Default Value

    • true

    Example

  • html
  • <ej-slider id="slider" [enableAnimation]="false"></ej-slider>

    enabled boolean

    Specifies the state of the slider.

    Default Value

    • true

    Example

  • html
  • <ej-slider id="slider" [enabled]="false"></ej-slider>

    enablePersistence boolean

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

    Default Value

    • false

    Example

  • html
  • <ej-slider id="slider" [enablePersistence]="false"></ej-slider>

    enableRTL boolean

    Specifies the Right to Left Direction of the slider.

    Default Value

    • false

    Example

  • html
  • <ej-slider id="slider" [enableRTL]="false"></ej-slider>

    height string

    Specifies the height of the slider.

    Default Value

    • 14

    Example

  • html
  • <ej-slider id="slider" [height]="height"></ej-slider>
  • ts
  • export class AppComponent { 
            height: string;
            constructor(){
                    this.height="14";
            }
     }

    htmlAttributes object

    Specifies the HTML Attributes of the ejSlider.

    Default Value

    • {}

    Example

  • html
  • <ej-slider id="slider" [htmlAttributes]="htmlAttributes"></ej-slider>
  • ts
  • export class AppComponent { 
            htmlAttributes: Object;
            constructor(){
                    this.htmlAttributes= {disabled:"disabled"};
            }
     }

    incrementStep number

    Specifies the incremental step value of the slider.

    Default Value

    • 1

    Example

  • html
  • <ej-slider id="slider" [incrementStep]="incrementStep"></ej-slider>
  • ts
  • export class AppComponent { 
            incrementStep: number;
            constructor(){
                    this.incrementStep = 2;
            }
     }

    largeStep number

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

    Default Value

    • 10

    Example

  • html
  • <ej-slider id="slider" [largeStep]="largeStep"></ej-slider>
  • ts
  • export class AppComponent { 
            largeStep: number;
            constructor(){
                    this.largeStep = 2;
            }
     }

    maxValue number

    Specifies the ending value of the slider.

    Default Value

    • 100

    Example

  • html
  • <ej-slider id="slider" [maxValue]="maxValue"></ej-slider>
  • ts
  • export class AppComponent { 
            maxValue: number;
            constructor(){
                    this.maxValue = 60;
            }
     }

    minValue number

    Specifies the starting value of the slider.

    Default Value

    • 0

    Example

  • html
  • <ej-slider id="slider" [minValue]="minValue"></ej-slider>
  • ts
  • export class AppComponent { 
            minValue: number;
            constructor(){
                    this.minValue = 0;
            }
     }

    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
  • <ej-slider id="slider" [orientation]="orientation"></ej-slider>
  • ts
  • export class AppComponent { 
            orientation: any;
            constructor(){
                    this.orientation = ej.Orientation.Vertical;
            }
     }

    readOnly boolean

    Specifies the readOnly of the slider.

    Default Value

    • false

    Example

  • html
  • <ej-slider id="slider" [readOnly]="true"></ej-slider>

    showRoundedCorner boolean

    Specifies the rounded corner behavior for slider.

    Default Value

    • false

    Example

  • html
  • <ej-slider id="slider" [showRoundedCorner]="true"></ej-slider>

    showScale boolean

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

    Default Value

    • false

    Example

  • html
  • <ej-slider id="slider" [showScale]="false"></ej-slider>

    showSmallTicks boolean

    Specifies the small ticks from the scale of the slider.

    Default Value

    • true

    Example

  • html
  • <ej-slider id="slider" [showSmallTicks]="false"></ej-slider>

    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
  • <ej-slider id="slider" [showTooltip]="true"></ej-slider>

    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
  • <ej-slider id="slider" [sliderType]="sliderType"></ej-slider>
  • ts
  • export class AppComponent { 
            sliderType: any;
            constructor(){
                    this.sliderType = ej.SliderType.Default;
            }
     }

    smallStep number

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

    Default Value

    • 1

    Example

  • html
  • <ej-slider id="slider" [smallStep]="smallStep"></ej-slider>
  • ts
  • export class AppComponent { 
            smallStep: number;
            constructor(){
                    this.smallStep = 2;
            }
     }

    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
  • <ej-slider id="slider" [value]="value"></ej-slider>
  • ts
  • export class AppComponent { 
            value: number;
            constructor(){
                    this.value = 60;
            }
     }

    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
  • <ej-slider id="slider" [values]="values"></ej-slider>
  • ts
  • export class AppComponent { 
            values: Number[];
            constructor(){
                this.values= [30,60];
            }
     }

    width string

    Specifies the width of the slider.

    Default Value

    • 100%

    Example

  • html
  • <ej-slider id="slider" [width]="width"></ej-slider>
  • ts
  • export class AppComponent { 
            width: string;
            constructor(){
                this.width= "300px";
            }
     }

    Methods

    disable()

    To disable the slider

    Example

  • html
  • <ej-slider id="slider"></ej-slider>
  • ts
  • // Create slider control object
    var sliderObj = $("#slider").data("ejSlider");
    sliderObj.disable(); // disable the slider control

    enable()

    To enable the slider

    Example

  • html
  • <ej-slider id="slider"></ej-slider>
  • ts
  • // Create slider control object
    var sliderObj = $("#slider").data("ejSlider");
    sliderObj.enable(); // enable the slider control

    getValue()

    To get value from slider handle

    Returns:

    number

    Example

  • html
  • <ej-slider id="slider"></ej-slider>
  • ts
  • // Create slider control object
    var sliderObj = $("#slider").data("ejSlider");
    sliderObj.getValue(); // get value from the slider handle

    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
  • <ej-slider id="slider"></ej-slider>
  • ts
  • // Create slider control object
    var sliderObj = $("#slider").data("ejSlider");
    sliderObj.setValue(10); // set value to the slider handle
  • html
  • <ej-slider id="slider"></ej-slider>
  • ts
  • // Create slider control object
    var sliderObj = $("#slider").data("ejSlider");
    sliderObj.setValue(30, true); // enable the slider animation

    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
  • <ej-slider id="slider" (change)="onChange($event)"></ej-slider>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onChange(e: any){ 
            // Your code here
            }
    
     }

    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
  • <ej-slider id="slider" (create)="onCreate($event)"></ej-slider>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onCreate(e: any){ 
            // Your code here
            }
    
     }

    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
  • <ej-slider id="slider" (destroy)="onDestroy($event)"></ej-slider>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onDestroy(e: any){ 
            // Your code here
            }
    
     }

    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
  • <ej-slider id="slider" [showScale]="true" (renderingTicks)="onRenderingTicks($event)"></ej-slider>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onRenderingTicks(e: any){ 
               e.value = "$" + e.value;   
               // Your code here      
            }
    
     }

    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
  • <ej-slider id="slider" (slide)="onSlide($event)"></ej-slider>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onSlide(e: any){ 
                // Your code here
            }
    
     }

    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
  • <ej-slider id="slider" (start)="onStart($event)"></ej-slider>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onStart(e: any){
                // Your code here
            }
    
     }

    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
  • <ej-slider id="slider" (stop)="onStop($event)"></ej-slider>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onStop(e: any){
                // Your code here
            }
    
     }

    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
  • <ej-slider id="slider" (tooltipChange)="onTooltipChange($event)"></ej-slider>
  • ts
  • export class AppComponent { 
            constructor(){
            }
            onTooltipChange(e: any){
                // Your code here
            }
    
     }