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