Angular API

ejSlider

25 Oct 201721 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

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

Example

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

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

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

animationSpeed `number`

Specifies the animationSpeed of the slider.

Default Value

500

Example

<ej-slider id="slider" [animationSpeed]="animationSpeed"></ej-slider>

export class AppComponent { 
        animationSpeed: number;
        constructor(){
                this.animationSpeed = 500;
        }
 }

cssClass `string`

Specify the CSS class to slider to achieve custom theme.

Default Value

””

Example

<ej-slider id="slider" [cssClass]="customCss"></ej-slider>

export class AppComponent { 
        customCss: string;
        constructor(){
                this.customCss = "gradient-lime";
        }
 }

enableAnimation `boolean`

Specifies the animation behavior of the slider.

Default Value

true

Example

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

enabled `boolean`

Specifies the state of the slider.

Default Value

true

Example

<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

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

enableRTL `boolean`

Specifies the Right to Left Direction of the slider.

Default Value

false

Example

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

height `string`

Specifies the height of the slider.

Default Value

14

Example

<ej-slider id="slider" [height]="height"></ej-slider>

export class AppComponent { 
        height: string;
        constructor(){
                this.height="14";
        }
 }

htmlAttributes `object`

Specifies the HTML Attributes of the ejSlider.

Default Value

{}

Example

<ej-slider id="slider" [htmlAttributes]="htmlAttributes"></ej-slider>

export class AppComponent { 
        htmlAttributes: Object;
        constructor(){
                this.htmlAttributes= {disabled:"disabled"};
        }
 }

incrementStep `number`

Specifies the incremental step value of the slider.

Default Value

1

Example

<ej-slider id="slider" [incrementStep]="incrementStep"></ej-slider>

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

<ej-slider id="slider" [largeStep]="largeStep"></ej-slider>

export class AppComponent { 
        largeStep: number;
        constructor(){
                this.largeStep = 2;
        }
 }

maxValue `number`

Specifies the ending value of the slider.

Default Value

100

Example

<ej-slider id="slider" [maxValue]="maxValue"></ej-slider>

export class AppComponent { 
        maxValue: number;
        constructor(){
                this.maxValue = 60;
        }
 }

minValue `number`

Specifies the starting value of the slider.

Default Value

0

Example

<ej-slider id="slider" [minValue]="minValue"></ej-slider>

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

<ej-slider id="slider" [orientation]="orientation"></ej-slider>

export class AppComponent { 
        orientation: any;
        constructor(){
                this.orientation = ej.Orientation.Vertical;
        }
 }

readOnly `boolean`

Specifies the readOnly of the slider.

Default Value

false

Example

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

showRoundedCorner `boolean`

Specifies the rounded corner behavior for slider.

Default Value

false

Example

<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

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

showSmallTicks `boolean`

Specifies the small ticks from the scale of the slider.

Default Value

true

Example

<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

<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

<ej-slider id="slider" [sliderType]="sliderType"></ej-slider>

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

<ej-slider id="slider" [smallStep]="smallStep"></ej-slider>

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

<ej-slider id="slider" [value]="value"></ej-slider>

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

<ej-slider id="slider" [values]="values"></ej-slider>

export class AppComponent { 
        values: Number[];
        constructor(){
            this.values= [30,60];
        }
 }

width `string`

Specifies the width of the slider.

Default Value

100%

Example

<ej-slider id="slider" [width]="width"></ej-slider>

export class AppComponent { 
        width: string;
        constructor(){
            this.width= "300px";
        }
 }

Methods

disable()

To disable the slider

Example

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

// Create slider control object
var sliderObj = $("#slider").data("ejSlider");
sliderObj.disable(); // disable the slider control

enable()

To enable the slider

Example

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

// 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

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

// 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

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

// Create slider control object
var sliderObj = $("#slider").data("ejSlider");
sliderObj.setValue(10); // set value to the slider handle

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

// 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

<ej-slider id="slider" (change)="onChange($event)"></ej-slider>

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

<ej-slider id="slider" (create)="onCreate($event)"></ej-slider>

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

<ej-slider id="slider" (destroy)="onDestroy($event)"></ej-slider>

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

<ej-slider id="slider" [showScale]="true" (renderingTicks)="onRenderingTicks($event)"></ej-slider>

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

<ej-slider id="slider" (slide)="onSlide($event)"></ej-slider>

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

<ej-slider id="slider" (start)="onStart($event)"></ej-slider>

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

<ej-slider id="slider" (stop)="onStop($event)"></ej-slider>

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

<ej-slider id="slider" (tooltipChange)="onTooltipChange($event)"></ej-slider>

export class AppComponent { 
        constructor(){
        }
        onTooltipChange(e: any){
            // Your code here
        }

 }