Getting started with Angular Range slider component

15 Aug 202412 minutes to read

The Slider component is available in @syncfusion/ej2-angular-inputs package. Utilize this package to render the Slider Component.

To get start quickly with Angular Range slider, you can check on this video:

Setting up angular project

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine.

npm install -g @angular/cli

Create a new application

ng new syncfusion-angular-app

By default, it install the CSS style base application. To setup with SCSS, pass –style=SCSS argument on create project.

Example code snippet.

ng new syncfusion-angular-app --style=SCSS

Navigate to the created project folder.

cd syncfusion-angular-app

Installing Syncfusion RangeSlider Package

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the Angular Syncfusion package from npm link.

Currently, Syncfusion provides two types of package structures for Angular components,

Ivy library distribution package format
Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.

Ivy library distribution package

Syncfusion Angular packages(>=20.2.36) has been moved to the Ivy distribution to support the Angular Ivy rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.

Add @syncfusion/ej2-angular-inputs package to the application.

npm install @syncfusion/ej2-angular-inputs --save

Angular compatibility compiled package(ngcc)

For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the ngcc package use the below.

Add @syncfusion/ej2-angular-inputs@ngcc package to the application.

npm install @syncfusion/ej2-angular-inputs@ngcc --save

To mention the ngcc package in the package.json file, add the suffix -ngcc with the package version as below.

@syncfusion/ej2-angular-inputs:"20.2.38-ngcc"

Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.

Adding Syncfusion Slider Component

Add the Slider component snippet in app.component.ts as follows.

import { SliderModule } from '@syncfusion/ej2-angular-inputs'
import { Component } from '@angular/core';

@Component({
imports: [
    SliderModule
  ],
    standalone: true,
    selector: 'app-root',
    template: `
    <div id='container'>
        <div class='wrap'>
            <ejs-slider id='slider' [value]=30></ejs-slider>
        </div>
    </div>`
})

export class AppComponent {
}

Adding Slider CSS reference

Add Slider component styles as given in the angular-cli.json file within the apps -> styles section.

Note: If you are using Angular 6 project, add the changes in angular.json file.

@import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

The below example shows a basic Slider example.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SliderModule } from '@syncfusion/ej2-angular-inputs'




import { Component } from '@angular/core';

@Component({
imports: [
        
        SliderModule
    ],


standalone: true,
    selector: 'my-app',
    template: `
    <div id='container'>
        <div class='wrap'>
            <ejs-slider id='slider' [value]=30></ejs-slider>
        </div>
    </div>`,
    styleUrls:['./index.css'],
})

export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Types

The types of Slider are as follows:

Types	Usage
Default	Shows a default Slider to select a single value.
MinRange	Displays the shadow from the start value to the current selected value.
Range	Selects a range of values. It also displays the shadow in-between the selection range.

Both the Default Slider and Min-Range Slider have same behavior that is used to select a single value.
In Min-Range Slider, a shadow is considered from the start value to current handle position. But the Range Slider contains two handles that is used to select a range of values and a shadow is considered in between the two handles.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SliderModule } from '@syncfusion/ej2-angular-inputs'




import { Component } from '@angular/core';

@Component({
imports: [
        
        SliderModule
    ],


standalone: true,
    selector: 'my-app',
    template: `
    <div id='container'>
      <div class='wrap'>
          <div class="sliderwrap">
              <label class="labeltext">Default</label>
              <ejs-slider id='default' [value]=30></ejs-slider>
          </div>
          <div class="sliderwrap">
              <label class="labeltext">MinRange</label>
              <ejs-slider id='minrange' [type]="minType" [value]='minValue'></ejs-slider>
          </div>
          <div class="sliderwrap">
              <label class="labeltext">Range</label>
              <ejs-slider id='range' [type]="rangeType" [value]='rangeValue'></ejs-slider>
          </div>
      </div>
    </div>`,
    styleUrls:['./index.css']
})

export class AppComponent {
  public minType: string = "MinRange";
  public rangeType: string = "Range";
  public minValue: number = 30;
  public rangeValue: number[] = [30, 70];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customization

Orientation

The Slider can be displayed, either in horizontal or vertical orientation. By default, the Slider renders in horizontal orientation.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SliderModule } from '@syncfusion/ej2-angular-inputs'




import { Component } from '@angular/core';

@Component({
imports: [
        
        SliderModule
    ],


standalone: true,
    selector: 'my-app',
    template: `
    <div id='container'>
      <div class='wrap'>
          <ejs-slider id='slider'  [orientation]= 'orientation' [value]=30></ejs-slider>
      </div>
    </div>`,
    styleUrls:['./index.css']
})

export class AppComponent {
  public orientation: string ="Vertical";
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Slider displays the tooltip to indicate the current value by clicking the Slider bar or drag the Slider handle. The Tooltip position can be customized by using the placement property. Also decides the tooltip display mode on a page, i.e., on hovering, focusing, or clicking on the Slider handle and it always remains/displays on the page.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SliderModule } from '@syncfusion/ej2-angular-inputs'




import { Component } from '@angular/core';

@Component({
imports: [
        
        SliderModule
    ],


standalone: true,
    selector: 'my-app',
    template: `
    <div id='container'>
      <div class='wrap'>
          <ejs-slider id='slider'  [type]= 'type' [tooltip] = 'tooltip' [value]=30></ejs-slider>
      </div>
    </div>`,
    styleUrls:['./index.css']
})

export class AppComponent {
  public type: string ="MinRange";
  public tooltip: Object ={ placement: 'After', isVisible: true, showOn: 'Always' };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Buttons

The Slider value can be changed by using the Increase and Decrease buttons. In Range Slider, by default the first handle value will be changed while clicking the button. Change the handle focus and press the button to change the last focused handle value.

After enabling the slider buttons if the ‘Tab’ key is pressed, the focus goes to the handle
and not to the button.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SliderModule } from '@syncfusion/ej2-angular-inputs'




import { Component } from '@angular/core';

@Component({
imports: [
        
        SliderModule
    ],


standalone: true,
    selector: 'my-app',
    template: `
    <div id='container'>
      <div class='wrap'>
          <ejs-slider id='slider'  [type]= 'type' [showButtons]=true [value] = 'value' ></ejs-slider>
      </div>
    </div>`,
    styleUrls:['./index.css']
})

export class AppComponent {
  public type: string ="Range";
  public value: number[] = [30, 70];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));