The Date formatting can be achieved in ticks
and tooltip
using renderingTicks
and
tooltipChange
events respectively.
The process of formatting is explained in the below sample.
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 * 86400000 };
public min: number = new Date("2013-06-13").getTime();
public max: number = new Date("2013-06-21").getTime();
public step: number = 86400000;
public value: number = new Date("2013-06-15").getTime();
tooltipChangeHandler(args: SliderTooltipEventArgs): void {
let totalMiliSeconds = Number(args.text);
// Converting the current milliseconds to the respective date in desired format
let custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
}
renderingTicksHandler(args: SliderTickEventArgs): void {
let totalMiliSeconds = Number(args.value);
// Converting the current milliseconds to the respective date in desired format
let custom = { year: "numeric", month: "short", day: "numeric" };
args.text = new Date(totalMiliSeconds).toLocaleDateString("en-us", custom);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div id='container'>
<div class='wrap'>
<ejs-slider id='slider' [min]="min" [max]="max" [value]="value" step=86400000 [tooltip]="tooltipData" [ticks]="ticksData" [showButtons]=true
(tooltipChange)='tooltipChangeHandler($event)' (renderingTicks)='renderingTicksHandler($event)'></ejs-slider>
</div>
</div>
.wrap {
box-sizing: border-box;
height: 100px;
margin: 0 auto;
padding: 30px 10px;
width: 460px;
}
.wrap .label {
text-align: center;
}
The time formatting can be achieved same as the date formatting using renderingTicks
and
change
events. The process of time formatting is
explained in the below sample.
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();
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);
}
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);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div id='container'>
<div class='wrap'>
<ejs-slider id='slider' [min]="min" [max]="max" [value]="value" [tooltip]="tooltipData" [ticks]="ticksData" [showButtons]=true [step]="step"
(tooltipChange)='tooltipChangeHandler($event)' (renderingTicks)='renderingTicksHandler($event)'></ejs-slider>
</div>
</div>
The numeric values can be formatted into different decimal digits or fixed number of whole numbers or to represent the units. The Numeric processing is demonstrated below.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css']
})
export class AppComponent {
public tooltipData01: Object = { isVisible: true, format: '##.## Km' };
public ticksData01: Object = { placement: 'After', format: '##.## Km', largeStep: 20, smallStep: 10, showSmallTicks: true };
public tooltipData02: Object = { isVisible: true, format: '##.#00' };
public ticksData02: Object = { placement: 'After', format: '##.#00', largeStep: 0.02, smallStep: 0.01, showSmallTicks: true };
public tooltipData03: Object = { isVisible: true, format: '00##' };
public ticksData03: Object = { placement: 'After', format: '00##', largeStep: 20, smallStep: 10, showSmallTicks: true };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div id='container'>
<div class='wrap'>
<div class='label'>Slider formatted with unit representation</div>
<ejs-slider id='slider' [min]=0 [max]=100 [value]=30 [tooltip]="tooltipData01" [ticks]="ticksData01"></ejs-slider>
</div>
<div class='wrap'>
<div class='label'>Slider formatted with three decimal specifiers</div>
<ejs-slider id='slider1' [min]=0.1 [max]=0.2 [step]=0.01 [value]=0.13 [tooltip]="tooltipData02" [ticks]="ticksData02"></ejs-slider>
</div>
<div class='wrap'>
<div class='label'>Slider formatted with two leading zeros</div>
<ejs-slider id='slider2' [min]=0 [max]=100 [value]=30 [tooltip]="tooltipData03" [ticks]="ticksData03"></ejs-slider>
</div>
</div>
Slider component supports one and two-way property binding. Slider two way binding can be achieved through ngModel Angular directive.
Follow the below steps to perform two-way binding with ngModel.
<ejs-slider class="form-control" id='slider' [ticks]="ticks" [(ngModel)]="slidervalue" name="slider" required #slider="ngModel"></ejs-slider>
<input type="number" id="name" name="name" class="form-control" required [(ngModel)]="slidervalue" #slider="ngModel">
export class AppComponent {
slidervalue = "30";
public ticks: Object = {
placement: 'Before',
largeStep: 20,
smallStep: 5,
showSmallTicks: true
};
}
import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css']
})
export class AppComponent {
slidervalue = "30";
public ticks: Object = {
placement: 'Before',
largeStep: 20,
smallStep: 5,
showSmallTicks: true
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule } from '@angular/forms';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule,
FormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div class="container">
<form #sliderForm="ngForm">
<div class="form-group">
<label for="slider">Slider</label>
<br/> <br/> <br/>
<ejs-slider class="form-control" id='slider' [ticks]="ticks" [(ngModel)]="slidervalue" name="slider" required #slider="ngModel"></ejs-slider>
<br/> <br/> <br/>
<input type="number" id="name" name="name" class="form-control" required [(ngModel)]="slidervalue" #slider="ngModel">
</div>
</form>
</div>
Slider validation can be achieved in Angular using Reactive forms. Here the sample shown slider validation state based on Angular form classes.
Follow below steps to validate slider within reactive forms.
sliderForm: FormGroup;
constructor(fb: FormBuilder) {
this.value = 30;
this.sliderForm = fb.group({
'slider': [0, Validators.min(10)]
});
}
Class if true | Class if false | state |
---|---|---|
ng-touched |
ng-untouched |
The control has been visited. |
ng-dirty |
ng-pristine |
The control’s value has changed. |
ng-valid |
ng-invalid |
The control’s value is valid. |
<div *ngIf="sliderForm.invalid">
slider has <b><i>invalid </i> </b> value and choose value greater than 10.
</div><br/>
<div *ngIf="sliderForm.valid">
Slider has <b><i>valid </i> </b> value {{value}}.
</div><br/>
<div *ngIf="sliderForm.pristine">
Slider having state <b><i>pristine.</i></b> Slider value not yet changed by user. <br/>
</div>
<div *ngIf="sliderForm.dirty">
Slider having state <b><i>dirty.</i> </b> Slider value changed by user.
</div>
<br/>
<button [disabled]="sliderForm.invalid" type="submit">submit</button><br/><br/>
<div class="formresult" [hidden]="!validated">
Slider value choosen as: {{value}}
</div>
import { Component, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css']
})
export class AppComponent {
value; slidervalue; validated = false;
sliderForm: FormGroup;
constructor(@Inject(FormBuilder) public fb: FormBuilder) {
this.value = 30;
this.sliderForm = this.fb.group({
'slider': [0, Validators.min(10)]
});
}
onSubmit() {
if (this.sliderForm.valid) {
this.validated = true;
console.log('form submitted');
console.log(this.sliderForm.value.slider);
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule,
FormsModule, ReactiveFormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div class="container">
<form [formGroup]="sliderForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="slider">Slider</label>
<ejs-slider formControlName="slider" id='sliderelement' [(ngModel)]="value" type="MinRange" required></ejs-slider>
<div *ngIf="sliderForm.invalid">
slider has <b><i>invalid </i> </b> value and choose value greater than 10.
</div>
<div *ngIf="sliderForm.valid">
Slider has <b><i>valid </i> </b> value {{value}}.
</div><br/>
<div *ngIf="sliderForm.pristine">
Slider having state <b><i>pristine.</i></b> Slider value not yet changed by user.
</div>
<div *ngIf="sliderForm.dirty">
Slider having state <b><i>dirty.</i> </b> Slider value changed by user.
</div><br/>
<div *ngIf="sliderForm.untouched">
Slider having state <b><i>untouched.</i></b> Slider has not visited by user.
</div>
<div *ngIf="sliderForm.touched">
Slider having state <b><i>touched.</i> </b> Slider has been visited by user.
</div>
<br/>
<button [disabled]="sliderForm.invalid" type="submit">submit</button><br/><br/>
<div class="formresult" [hidden]="!validated">
Slider value choosen as: {{value}}
</div>
</div>
</form>
</div>
Slider can be validated in Angular using Template-driven forms.
Class if true | Class if false | state |
---|---|---|
ng-touched |
ng-untouched |
The control has been visited. |
ng-dirty |
ng-pristine |
The control’s value has changed. |
ng-valid |
ng-invalid |
The control’s value is valid. |
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import {NgForm} from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild('sliderForm') form: NgForm;
onSubmit() {
this.validated = true;
console.log(this.form.valid)
}
ngOnInit() {
public value =70;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderValidaton } from './sliderValidation';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule } from '@angular/forms';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule,
FormsModule
],
declarations: [AppComponent, SliderValidaton],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
import { Directive } from '@angular/core';
import { NG_VALIDATORS, FormControl, Validator, ValidationErrors } from '@angular/forms';
@Directive({
selector: '[slider-validate]',
providers: [{ provide: NG_VALIDATORS, useExisting: SliderValidaton, multi: true }]
})
export class SliderValidaton implements Validator {
validate(c: FormControl): ValidationErrors {
const isValid = c.value > 10;
return isValid ? null : 'not valid';
}
}
<div class="container">
<form #sliderForm="ngForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="slider">Slider</label>
<ejs-slider name = "slider" id='default' type="MinRange" slider-validate [(ngModel)] ='value' required></ejs-slider>
<div *ngIf="sliderForm.invalid">
slider has <b><i>invalid </i> </b> value and choose value greater than 10.
</div>
<div *ngIf="sliderForm.valid">
Slider has <b><i>valid </i> </b> value {{value}}.
</div>
<br />
<div *ngIf="sliderForm.pristine">
Slider having state <b><i>pristine.</i></b> Slider value not yet changed by user.
</div>
<div *ngIf="sliderForm.dirty">
Slider having state <b><i>dirty.</i> </b> Slider value changed by user.
</div>
<br />
<div *ngIf="sliderForm.untouched">
Slider having state <b><i>untouched.</i></b> Slider has not visited by user.
</div>
<div *ngIf="sliderForm.touched">
Slider having state <b><i>touched.</i> </b> Slider has been visited by user.
</div>
<br/>
<button [disabled]="sliderForm.invalid" type="submit">submit</button><br/><br/>
<div class="formresult" [hidden]="!validated">
Slider value choosen as: {{value}}
</div>
</div>
</form>
</div>
We can validate the Slider component using our FormValidator
. The following steps walk-through
for slider validation.
rules
collection.
Here, we set the
min
property of Slider which sets the minimum value in Slider component and it has hidden
input since enable validateHidden
property as true.//slider element
<ejs-slider id='default'></ejs-slider>
// sets required property in the FormValidator rules collection
export class AppComponent {
@ViewChild('formId') element:any;
public formObject: FormValidator;
ngAfterViewInit() {
let options: FormValidatorModel = {
rules: {
'default': {
validateHidden: true,
min: [6, "You must select value greater than 5"]
}
}
};
this.formObject = new FormValidator(this.element.nativeElement, options);
}
}
Form validation done by either ID or name value of Slider component. In above used ID of the slider for validate it.
Using Slider name: Render Slider with name attribute. In the below code snippet we have used name attribute value of ‘slider’ for form validation.
//slider element with name attribute
<ejs-slider id='default' name='slider'></ejs-slider>
// sets required property in the FormValidator rules collection
export class AppComponent {
@ViewChild('formId') element:any;
public formObject: FormValidator;
ngAfterViewInit() {
let options: FormValidatorModel = {
rules: {
'slider': {
validateHidden: true,
min: [30, "You must select value greater than 30"]
}
}
};
this.formObject = new FormValidator(this.element.nativeElement, options);
}
}
validate
method and it validates the Slider value with the defined
rules collection and returns the result.
If user selects the value less than the minimum value, form will not submit.this.formObject.validate();
public onChanged(): void {
this.formObject.validate();
}
import { Component,ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { SliderComponent } from '@syncfusion/ej2-angular-inputs';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
@Component({
selector: 'my-app',
templateUrl: 'app/template.html',
styleUrls:['index.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@ViewChild('formId') element:any;
@ViewChild('default') sliderObj: SliderComponent;
public formObject: FormValidator;
public ticks: Object = {
placement: 'Before',
largeStep: 20,
smallStep: 5,
showSmallTicks: true
};
ngAfterViewInit() {
let options: FormValidatorModel = {
rules: {
'slider': {
validateHidden: true,
min: [30, "You must select value greater than 30"]
}
}
};
this.formObject = new FormValidator(this.element.nativeElement, options);
}
public btnClick(): void {
if (this.sliderObj.value < 5) {
alert("Please select value greater than 30");
} else {
alert("Submitted");
this.element.nativeElement.submit();
}
}
public onChanged(): void {
this.formObject.validate();
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule,
FormsModule,
ReactiveFormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div id='container'>
<div class="content-wrapper" style="margin-bottom: 25px">
<div class="form-title">
<span>Slider Form Validation</span>
</div>
<form #formId class="form-horizontal">
<div class="form-group">
<div class="e-float-input">
<ejs-slider id='default' #default name='slider' [value]=20 (changed)='onChanged()'
[ticks]='ticks'></ejs-slider>
</div>
</div>
</form>
<button ejs-button isPrimary="true" type="submit" id="submit_btn" (click)="btnClick($event)">Submit</button>
</div>
</div>
Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can
customize the slider bar. The slider bar can be customized with different themes. By default, slider
have class name e-slider-track
for bar. The class can be overridden with our own color values like
the following code snippet.
.e-control.e-slider .e-slider-track .e-range {
background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
}
You can also apply background color for a certain range depending upon slider values, using change event.
change(args: SliderChangeEventArgs) => {
if (args.value > 0 && args.value <= 25) {
// Change handle and range bar color to green when
(sliderHandle as HTMLElement).style.backgroundColor = 'green';
(sliderTrack as HTMLElement).style.backgroundColor = 'green';
} else if (args.value > 25 && args.value <= 50) {
// Change handle and range bar color to royal blue
(sliderHandle as HTMLElement).style.backgroundColor = 'royalblue';
(sliderTrack as HTMLElement).style.backgroundColor = 'royalblue';
} else if (args.value > 50 && args.value <= 75) {
// Change handle and range bar color to dark orange
(sliderHandle as HTMLElement).style.backgroundColor = 'darkorange';
(sliderTrack as HTMLElement).style.backgroundColor = 'darkorange';
} else if (args.value > 75 && args.value <= 100) {
// Change handle and range bar color to red
(sliderHandle as HTMLElement).style.backgroundColor = 'red';
(sliderTrack as HTMLElement).style.backgroundColor = 'red';
}
}
.slider-labeltext {
text-align: left;
font-weight: 500;
font-size: 13px;
padding-bottom: 10px;
}
#height_slider .e-handle,
#gradient_slider .e-handle {
height: 20px;
width: 20px;
margin-left: -10px;
top: calc(50% - 10px);
}
.slider_container {
margin-top: 40px;
margin: 0 auto;
max-width: 380px;
}
#height_slider .e-tab-handle::after {
background-color: #f9920b;
}
#height_slider .e-slider-track {
height: 8px;
top: calc(50% - 4px);
border-radius: 0;
}
#gradient_slider .e-range {
height: 6px;
top: calc(50% - 3px);
border-radius: 5px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZTE0NTFkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTclIiBzdG9wLWNvbG9yPSIjZmRmZjQ3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjODZmOWZlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjUlIiBzdG9wLWNvbG9yPSIjMjkwMGY4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzQlIiBzdG9wLWNvbG9yPSIjNmUwMGY4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iODMlIiBzdG9wLWNvbG9yPSIjZTMzZGY5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UxNDQyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #1e5799),
color-stop(100%, #7db9e8)
);
background: -webkit-linear-gradient(
left,
#e1451d 0,
#fdff47 17%,
#86f9fe 50%,
#2900f8 65%,
#6e00f8 74%,
#e33df9 83%,
#e14423 100%
);
background: linear-gradient(
left,
#e1451d 0,
#fdff47 17%,
#86f9fe 50%,
#2900f8 65%,
#6e00f8 74%,
#e33df9 83%,
#e14423 100%
);
background: -moz-linear-gradient(
left,
#e1451d 0,
#fdff47 17%,
#86f9fe 50%,
#2900f8 65%,
#6e00f8 74%,
#e33df9 83%,
#e14423 100%
);
background: -o-linear-gradient(
left,
#e1451d 0,
#fdff47 17%,
#86f9fe 50%,
#2900f8 65%,
#6e00f8 74%,
#e33df9 83%,
#e14423 100%
);
}
#gradient_slider .e-slider-track {
height: 8px;
top: calc(50% - 4px);
border-radius: 5px;
}
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SliderComponent, SliderChangeEventArgs } from '@syncfusion/ej2-angular-inputs';
@Component({
selector: 'my-app',
template: ` <div class="slider_container">
<div class="slider-labeltext slider_userselect">Height</div>
<!-- Square slider element -->
<ejs-slider id='height_slider' [value]='value' [min]='min' [max]='max' ></ejs-slider>
</div>
<div class="slider_container">
<div class="slider-labeltext slider_userselect">Gradient color</div>
<ejs-slider id='gradient_slider' [value]='gradient_value' [min]='min' [max]='max' [type]='range' ></ejs-slider>
</div>
<div class="slider_container">
<div class="slider-labeltext slider_userselect">Dynamic thumb and selection bar color</div>
<ejs-slider id='dynamic_color_slider' [value]='dynamic_value' [min]='min' [max]='max' [type]='range' (created)='created()' (change)='change($event)'></ejs-slider>
</div>`,
styleUrls : ["app/app.component.css"],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public value: number = 30;
public min: number = 0;
public max: number = 100;
public gradient_value: number = 30;
public range: string = 'MinRange';
public sliderTrack: HTMLElement;
public sliderHandle: HTMLElement;
public dynamic_value: number = 30;
// Handler used for slider created event
created() {
this.sliderTrack = document.getElementById('dynamic_color_slider').querySelector('.e-range');
this.sliderHandle = document.getElementById('dynamic_color_slider').querySelector('.e-handle');
(this.sliderHandle as HTMLElement).style.backgroundColor = 'green';
(this.sliderTrack as HTMLElement).style.backgroundColor = 'green';
}
// Handler used for slider change event
change(args: SliderChangeEventArgs) {
if (args.value > 0 && args.value <= 25) {
// Change handle and range bar color to green when
(this.sliderHandle as HTMLElement).style.backgroundColor = 'green';
(this.sliderTrack as HTMLElement).style.backgroundColor = 'green';
} else if (args.value > 25 && args.value <= 50) {
// Change handle and range bar color to royal blue
(this.sliderHandle as HTMLElement).style.backgroundColor = 'royalblue';
(this.sliderTrack as HTMLElement).style.backgroundColor = 'royalblue';
} else if (args.value > 50 && args.value <= 75) {
// Change handle and range bar color to dark orange
(this.sliderHandle as HTMLElement).style.backgroundColor = 'darkorange';
(this.sliderTrack as HTMLElement).style.backgroundColor = 'darkorange';
} else if (args.value > 75 && args.value <= 100) {
// Change handle and range bar color to red
(this.sliderHandle as HTMLElement).style.backgroundColor = 'red';
(this.sliderTrack as HTMLElement).style.backgroundColor = 'red';
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Slider appearance can be customized via CSS. By overriding the slider CSS classes, the slider
limit bar can be customized. Here, the limit bar is customized with different background color. By
default, the slider has class e-limits
for limits bar. You can override the class with our own
color values as given in the following code snippet.
.e-slider-container.e-horizontal .e-limits {
background-color: rgba(69, 100, 233, 0.46);
}
.sliderwrap {
margin-top: 45px;
width: 400px;
margin: 0 auto;
}
.e-bigger .content-wrapper {
width: 80%;
}
.sliderwrap label {
padding-bottom: 50px;
font-size: 13px;
font-weight: 500;
margin-top: 15px;
display: block;
}
.userselect {
-webkit-user-select: none;
/* Safari 3.1+ */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Standard syntax */
}
#range .e-limits,
#minrange .e-limits {
background-color: #ccc;
background-color: rgba(69, 100, 233, 0.46);
}
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SliderModule, SliderComponent, LimitDataModel, SliderType, TicksDataModel, TooltipDataModel } from '@syncfusion/ej2-angular-inputs';
import { SliderTooltipEventArgs, SliderTickEventArgs } from '@syncfusion/ej2-inputs';
@Component({
selector: 'my-app',
template: ` <div class='sliderwrap'>
<label class="labeltext">MinRange Slider With Limits</label>
<ejs-slider id='minrange' #minrange [value]='minValue' [min]='min' [max]='max' [tooltip]='tooltip' [ticks]='ticks' [type]='minType'
[limits]='minRangeLimits'></ejs-slider>
</div>
<div class='sliderwrap'>
<label class="labeltext">Range Slider With Limits</label>
<ejs-slider id='range' #range [value]='rangeValue' [min]='min' [max]='max' [tooltip]='tooltip' [ticks]='ticks' [type]='rangetype'
[limits]='rangeLimits'></ejs-slider>
</div>`,
styleUrls : ["app/app.component.css"]
})
export class AppComponent {
@ViewChild('minrange')
public minrangeObj: SliderComponent;
@ViewChild('range')
public rangeObj: SliderComponent;
public min: number = 0;
public max: number = 100;
public minValue: number = 30;
public rangeValue: number[] = [30, 70];
public tooltip: TooltipDataModel = {
placement: 'Before',
isVisible: true
};
public ticks: TicksDataModel = {
placement: 'After',
largeStep: 20,
smallStep: 5,
showSmallTicks: true
};
public minType: SliderType = 'MinRange';
public rangetype: SliderType = 'Range';
public minRangeLimits: LimitDataModel = { enabled: true, minStart: 10, minEnd: 40 };
public rangeLimits: LimitDataModel = { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90 };
// Eventlisteners to lock first handle of the both sliders
public fixOne(args: any): void {
this.minrangeObj.limits.startHandleFixed = args.checked;
this.rangeObj.limits.startHandleFixed = args.checked;
}
// Eventlisteners to lock second handle of the both sliders
public fixSecond(args: any): void {
this.minrangeObj.limits.endHandleFixed = args.checked;
this.rangeObj.limits.endHandleFixed = args.checked;
}
// Eventlisteners to change limit values for both sliders
public minStartChange(args: any): void {
this.minrangeObj.limits.minStart = args.value;
this.rangeObj.limits.minStart = args.value;
}
public minEndChange(args: any): void {
this.minrangeObj.limits.minEnd = args.value;
this.rangeObj.limits.minEnd = args.value;
}
public maxStartChange(args: any): void {
this.minrangeObj.limits.maxStart = args.value;
this.rangeObj.limits.maxStart = args.value;
}
public maxEndChange(args: any): void {
this.minrangeObj.limits.maxEnd = args.value;
this.rangeObj.limits.maxEnd = args.value;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Slider view can be customized via CSS. By overriding the slider CSS classes, you can customize the
ticks. The ticks in slider allows you to easily identify the current value/values of the slider. It
contains smallStep
and largeStep
. By
default, slider has class e-tick
for slider ticks. You can override the class as per your requirement.
Refer to the following code snippet to render ticks.
.e-scale .e-tick.e-custom::before {
content: '\e967';
position: absolute;
}
Here, the color for rendered ticks has been applied through nth-child(child_number
). The color is
applied to the value of the child_number
in the slider.
.e-scale :nth-child(1)::before {
color: red;
}
.userselect {
-webkit-user-select: none;
/* Safari 3.1+ */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Standard syntax */
}
.slider_labelText {
text-align: left;
font-weight: 500;
font-size: 13px;
padding-bottom: 40px;
}
.slider_container {
margin-top: 40px;
margin: 0 auto;
width: 80%;
}
.e-bigger .slider-content-wrapper {
width: 80%;
}
#ticks_slider .e-range {
z-index: unset;
}
#ticks_slider .e-scale .e-tick {
background-image: none;
visibility: visible;
font-family: 'e-customized-icons';
}
@font-face {
font-family: 'e-customized-icons';
src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
font-weight: normal;
font-style: normal;
}
#ticks_slider .e-scale {
z-index: 0;
}
#ticks_slider .e-scale .e-custom::before {
content: "\e967";
position: absolute;
}
#ticks_slider .e-scale :nth-child(1)::before {
color: red;
}
#ticks_slider .e-scale :nth-child(2)::before {
color: blue;
}
#ticks_slider .e-scale :nth-child(3)::before {
color: green;
}
#ticks_slider .e-scale :nth-child(4)::before {
color: blueviolet;
}
#ticks_slider .e-scale :nth-child(5)::before {
color: orange;
}
#ticks_slider .e-scale :nth-child(6)::before {
color: pink;
}
#ticks_slider .e-scale .e-custom::before {
font-size: 10px;
}
#ticks_slider .e-scale .e-custom::before {
top: calc(50% + 1px);
left: calc(50% - 5px);
}
#slider_wrapper #ticks_slider .e-scale :nth-child(1)::before {
top: calc(50% + 1px);
left: calc(0% - 5px);
}
#slider_wrapper #ticks_slider .e-scale :nth-child(6)::before {
top: calc(50% + 1px);
left: calc(100% - 6px);
}
import { Component, ViewEncapsulation, ViewChild} from '@angular/core';
import { SliderComponent } from '@syncfusion/ej2-angular-inputs';
import { SliderTickRenderedEventArgs, SliderTickEventArgs, Placement } from '@syncfusion/ej2-inputs';
@Component({
selector: 'my-app',
template: `<div class="slider_container" id="slider_wrapper">
<div class="slider_labelText userselect">Dynamic ticks color</div>
<ejs-slider id='ticks_slider' [value]='value' [min]='min' [max]='max' [type]='type' [step]='step' [ticks]='ticks' (renderingTicks)='renderingTicks($event)' ></ejs-slider>
</div>
<div class="slider_container">
<div class="slider_labelText userselect">Ticks with legends</div>
<ejs-slider id='slider' [value]='value' [min]='min' [max]='max' [type]='type' [ticks]='slider_ticks' (renderedTicks)='renderedTicks($event)'></ejs-slider>
</div>`,
styleUrls : ["app/app.component.css"],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public count: number = 1;
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 };
public slider_ticks: Object = { placement: 'Both', largeStep: 20, smallStep: 5 };
private renderingTicks(args: SliderTickEventArgs) {
if (args.tickElement.classList.contains('e-large')) {
args.tickElement.classList.add('e-custom');
}
}
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];
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Slider appearance can be customized through CSS. By overriding the slider CSS classes, you can customize
the thumb. By default, slider has unique class e-handle
for slider thumb. You can override the following
class as per your requirement. Here, in the sample, the slider thumb has been customized to square, circle,
oval shapes, and background image has also been customized.
.e-control.e-slider .e-handle {
background-image: url('https://ej2.syncfusion.com/demos/src/slider/images/thumb.png');
background-color: transparent;
height: 25px;
width: 25px;
}
/* square slider */
.square_slider.e-control.e-slider .e-handle {
border-radius: 0%;
background-color: #f9920b;
border: 0;
}
/* circle slider */
.circle_slider.e-control.e-slider .e-handle {
border-radius: 50%;
background-color: #f9920b;
border: 0;
}
/* oval slider */
.oval_slider.e-control.e-slider .e-handle {
height: 25px;
width: 8px;
top: 3px;
border-radius: 15px;
background-color: #f9920b;
}
.slider-userselect {
-webkit-user-select: none;
/* Safari 3.1+ */
-moz-user-select: none;
/* Firefox 2+ */
-ms-user-select: none;
/* IE 10+ */
user-select: none;
/* Standard syntax */
}
.labelText {
text-align: left;
font-weight: 500;
font-size: 13px;
padding-bottom: 10px;
}
.slider_container {
margin-top: 40px;
margin: 0 auto;
width: 80%;
}
#square_slider .e-handle {
border-radius: 0;
background-color: #f9920b;
border: 0;
}
#circle_slider .e-handle {
background-color: #f9920b;
border-radius: 50%;
border: 0;
}
#image_slider .e-handle {
height: 25px;
width: 24px;
background-size: 24px;
}
#image_slider .e-handle {
background-image: url("https://ej2.syncfusion.com/demos/src/slider/images/thumb.png");
background-repeat: no-repeat;
background-color: transparent;
border: 0;
}
#square_slider .e-tab-handle::after,
#circle_slider .e-tab-handle::after {
background-color: #f9920b;
}
#image_slider .e-tab-handle::after {
background-color: transparent;
}
#oval_slider .e-handle {
height: 25px;
width: 8px;
top: 3px;
border-radius: 15px;
background-color: #f9920b;
}
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { SliderComponent } from '@syncfusion/ej2-angular-inputs';
@Component({
selector: 'my-app',
template: `
<div class="slider_container">
<div class="labelText slider-userselect">Square</div>
<ejs-slider id='square_slider' [value]='value' [min]='min' [max]='max'></ejs-slider>
</div>
<div class="slider_container">
<div class="labelText slider-userselect">Circle</div>
<ejs-slider id='circle_slider' [value]='value' [min]='min' [max]='max'></ejs-slider>
</div>
<div class="slider_container">
<div class="labelText slider-userselect">Oval</div>
<ejs-slider id='oval_slider' [value]='value' [min]='min' [max]='max'></ejs-slider>
</div>
<div class="slider_container">
<div class="labelText slider-userselect">Custom image</div>
<ejs-slider id='image_slider' [value]='value' [min]='min' [max]='max' [ticks]='ticks'></ejs-slider>
</div>`,
styleUrls : ["app/app.component.css"],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public value: number = 30;
public min: number = 0;
public max: number = 100;
public ticks: Object = {
placement: 'After'
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SliderModule } from '@syncfusion/ej2-angular-inputs';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SliderModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);