Represents the EJ2 Angular Slider Component.
<ejs-slider [value]='value'></ejs-slider>Specifies the color to the slider based on given value.
string
Specifies the custom classes to be added to the element used to customize the slider.
<ejs-slider id='default' [value]='value' cssClass="slider"></ejs-slider>
<style>
.slider {
border: 1px solid;
}
</style>import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css'],
})
export class AppComponent {
public value: number = 30;
}Defaults to ”
string[] | number[]
Specifies an array of slider values in number or string type. The min and max step values are not considered.
Defaults to null
boolean
Enables/Disables the animation for slider movement.
Defaults to true
boolean
Defines whether to allow the cross-scripting site or not.
Defaults to false
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
Enables or Disables the slider.
Defaults to true
Specified the limit within which the slider to be moved. Refer the documentation here to know more about this property.
Defaults to { enabled: false }
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
number
Gets/Sets the maximum value of the slider.
Defaults to 100
number
Gets/Sets the minimum value of the slider.
Defaults to 0
string
Specifies whether to render the slider in vertical or horizontal orientation. Refer the documentation here to know more about this property.
Defaults to ‘Horizontal’
boolean
Specifies whether the render the slider in read-only mode to restrict any user interaction. The slider rendered with user defined values and can’t be interacted with user actions.
Defaults to false
boolean
Specifies whether to show or hide the increase/decrease buttons of Slider to change the slider value. Refer the documentation here to know more about this property.
Defaults to false
number
Specifies the step value for each value change when the increase / decrease button is clicked or on arrow keys press or on dragging the thumb. Refer the documentation here to know more about this property.
Defaults to 1
It is used to render the slider ticks options such as placement and step values. Refer the documentation here to know more about this property with demo.
<ejs-slider id='default' [value]='value' [ticks]="ticks"></ejs-slider>import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css'],
})
export class AppComponent {
public value: number = 30;
public ticks: Object = {
placement: 'Before',
largeStep: 20,
smallStep: 5,
showSmallTicks: true
};
}Defaults to { placement: ‘before’ }
Specifies the visibility, position of the tooltip over the slider element.
Defaults to { placement: ‘Before’, isVisible: false, showOn: ‘Focus’, format: null }
string
Defines the type of the Slider. The available options are:
range - Allows to select a range of values in the Slider. It displays shadow in-between the selection range.
<div class="sliderwrap">
<label class="labeltext">Default Slider</label>
<ejs-slider id="default" [value]="value"></ejs-slider>
</div>
<div class="sliderwrap">
<label class="labeltext">MinRange Slider</label>
<ejs-slider id="minrange" [value]="value" [type]="mintype"></ejs-slider>
</div>
<div class="sliderwrap">
<label class="labeltext">Range Slider</label>
<ejs-slider id="range" [value]="rangevalue" [type]="rangetype"></ejs-slider>
</div>import { Component } from "@angular/core";@Component({ selector: “my-app”, templateUrl: “app/template.html”, styleUrls:[“index.css”], })
export class AppComponent { public value: number = 30; public rangevalue: Number[] = [30,70]; public mintype: string = “MinRange”; public rangetype: string = “Range”; }
<h3 class="doc-prop-wrapper" id="value" data-Path="value-value">
<a href="#value" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>value</span>
<span class="doc-prop-type"> `number` | `number[]`
</span>
</h3>
It is used to denote the current value of the Slider.
The value should be specified in array of number when render Slider type as range.
Defaults to *null*
<h3 class="doc-prop-wrapper" id="width" data-Path="width-width">
<a href="#width" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>width</span>
<span class="doc-prop-type"> `number` | `string`
</span>
</h3>
Specifies the width of the Slider.
Defaults to *null*
## Methods
### destroy
Removes the component from the DOM and detaches all its related event handlers.
Also it removes the attributes and classes.
Returns *void*
### reposition
It is used to reposition slider.
Returns *void*
## Events
<h3 class="doc-prop-wrapper" id="change" data-Path="change-change">
<a href="#change" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>change</span>
<span class="doc-prop-type"> [`EmitType<SliderChangeEventArgs>`](./sliderChangeEventArgs)
</span>
</h3>
We can trigger change event whenever Slider value is changed.
In other term, this event will be triggered while drag the slider thumb.
```html
<ejs-slider id='default' [value]='value' [step]="step"></ejs-slider>import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<ejs-slider id='ticks_slider'#slider [value]='value' [min]='min' [max]='max' [type]='type' [step]='step' [ticks]='ticks' (change)='change($event)' ></ejs-slider>
</div>
Change event:
<div id="slider">
</div>`,
styleUrls:['index.css'],
})
export class AppComponent {
public value: number = 30;
public min: number = 0;
public max: number = 100;
public step: number = 5;
public type: string = 'MinRange';
public ticks: Object = { placement: 'Before', largeStep: 20 };
private change(args: ChangeEventArgs) {
if(args.value) {
document.getElementById("slider").innerHTML = JSON.stringify(args);
}
}
} EmitType<SliderChangeEventArgs>
Fires whenever the Slider value is changed. In other term, this event will be triggered, while drag the slider thumb completed.
EmitType<Object>
Triggers when the Slider is successfully created.
EmitType<SliderTickRenderedEventArgs>
Triggers when the ticks are rendered on the Slider.
<ejs-slider id="slider" [value]="value" [min]="min" [max]="max" [type]="type" [ticks]="slider_ticks" step = 20 (renderedTicks)="renderedTicks($event)"></ejs-slider>import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "app/template.html",
styleUrls:["index.css"],
})
export class AppComponent {
public count: number = 1;
public value: number = 40;
public min: number = 0;
public max: number = 100;
public step: number = 5;
public type: string = "MinRange";
public ticks: Object = { placement: "Before", largeStep: 20 };
public slider_ticks: Object = { placement: "Both", largeStep: 20, smallStep: 5 };
private renderedTicks(args: SliderTickRenderedEventArgs) {
let li: any = args.ticksWrapper.getElementsByClassName("e-large");
let remarks: any = ["Very Poor", "Poor", "Average", "Good", "Very Good", "Excellent"];
for (let i: number = 0; i < li.length; ++i) {
(li[i].querySelectorAll(".e-tick-both")[1] as HTMLElement).innerText = remarks[i];
}
}
}Triggers on rendering the ticks element in the Slider, which is used to customize the ticks labels dynamically.
<ejs-slider id="slider" [min]="min" [max]="max" [value]="value" [ticks]="ticksData" [showButtons]=true [step]="step" (renderingTicks)="renderingTicksHandler($event)"></ejs-slider>import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "app/template.html",
styleUrls:["index.css"],
})
export class AppComponent {
public tooltipData: Object = { placement: "Before", isVisible: true };
public ticksData: Object = { placement: "After", largeStep: 2 * 3600000 };
public min: number =new Date(2013, 6, 13, 11).getTime();
public max: number = new Date(2013, 6, 13, 17).getTime();
public step: number = 3600000;
public value: number = new Date(2013, 6, 13, 13).getTime();
renderingTicksHandler(args: SliderTickEventArgs): void {
let totalMiliSeconds = Number(args.value);
let custom = { hour: "2-digit", minute: "2-digit" };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
} EmitType<SliderTooltipEventArgs>
Triggers when the Sider tooltip value is changed.
<ejs-slider id="slider" [min]="min" [max]="max" [value]="value" [tooltip]="tooltipData" [showButtons]=true [step]="step" (tooltipChange)="tooltipChangeHandler($event)"></ejs-slider>import { Component } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "app/template.html",
styleUrls:["index.css"],
})
export class AppComponent {
public tooltipData: Object = { placement: "Before", isVisible: true };
public min: number =new Date(2013, 6, 13, 11).getTime();
public max: number = new Date(2013, 6, 13, 17).getTime();
public step: number = 3600000;
public value: number = new Date(2013, 6, 13, 13).getTime();
tooltipChangeHandler(args: SliderTooltipEventArgs): void {
let totalMiliSeconds = Number(args.text);
let custom = { hour: "2-digit", minute: "2-digit" };
args.text = new Date(totalMiliSeconds).toLocaleTimeString("en-us", custom);
}
}