Angular

Search results

How To

Value formatting using slider

Date Format

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

index.css

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;
}

Time Format

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

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>

Numeric Value Customization

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

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 with ngModel

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.

Create simple slider component and binds the value property using ngModel. Refer to the below code snippet.

<ejs-slider class="form-control" id='slider' [ticks]="ticks" [(ngModel)]="slidervalue" name="slider" required #slider="ngModel"></ejs-slider>

Create numeric text box and bind the value using ngModel.

<input type="number" id="name" name="name" class="form-control" required [(ngModel)]="slidervalue" #slider="ngModel">

And name the same variable name in both slider and numeric text box. Which will help to view the two-way binding i.e. changing value in slider will change the numeric textbox value and vice versa.
Initialize the value of the variable in component file, while will be bound to slider and text box initially. The values will be changed synchronously while changing any one (slider or text-box) value.

export class AppComponent {
    slidervalue = "30";
  public ticks: Object = {
    placement: 'Before',
    largeStep: 20,
    smallStep: 5,
    showSmallTicks: true
  };
}

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

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 in Angular reactive form

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.

Create simple Angular reactive form. And add simple slider component within form.
Create form group with slider.

 sliderForm: FormGroup;
  constructor(fb: FormBuilder) {
    this.value = 30;
    this.sliderForm = fb.group({
      'slider': [0, Validators.min(10)]
    });
  }

Show the validation message, based on validation classes which is added to slider. Refer below code snippet.

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>

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

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 validation using Template-driven Forms

Slider can be validated in Angular using Template-driven forms.

The following CSS classes will be added on Slider component based on the action done by user.

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.

Source

Preview

app.component.ts

app.module.ts

main.ts

sliderValidation.ts

template.html

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>

Slider validation using FormValidator

We can validate the Slider component using our FormValidator. The following steps walk-through for slider validation.

Render Slider component inside form.
Bind changed event in the Slider component to validate the slider value when the value changes.
Initialize and render FormValidator for the form using form ID.
Set required property in the FormValidator 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 the form using 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();

Slider validation can be done during value changes in slider. Refer to the below code snippet.

  public onChanged(): void {
      this.formObject.validate();
  }

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

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>

Customize the bar

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';
        }
    }

Source

Preview

app.component.css

app.component.ts

app.module.ts

main.ts

.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);

Customize the limits

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);
}

Source

Preview

app.component.css

app.component.ts

app.module.ts

main.ts

.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);

Customize the ticks

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;
}

Source

Preview

app.component.css

app.component.ts

app.module.ts

main.ts

.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);

Customize the thumb

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;
}

Source

Preview

app.component.css

app.component.ts

app.module.ts

main.ts

.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);

Contents

Value formatting using slider
Date Format
Time Format
Numeric Value Customization
Km
Km largeStep 20 smallStep 10 showSmallTicks true
Slider with ngModel
Slider in Angular reactive form
Slider validation using Template-driven Forms
Slider validation using FormValidator
Customize the bar
Customize the limits
Customize the ticks
Customize the thumb

Contents

Value formatting using slider
Date Format
Time Format
Numeric Value Customization
Km
Km largeStep 20 smallStep 10 showSmallTicks true
Slider with ngModel
Slider in Angular reactive form
Slider validation using Template-driven Forms
Slider validation using FormValidator
Customize the bar
Customize the limits
Customize the ticks
Customize the thumb

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!