How to get started easily with Syncfusion Angular 11 Slider?

The Essential JS2 Angular Slider component is used to allows the users to select a value or range of values in-between the min and max range, by dragging the handle over the slider track. This article explains, In this knowledge base, we are going to learn how to easily get started with EJ2 Slider component in Angular 11 project with minimal code.

Prerequisites

Before we starting, the following tools and SDK needs to be installed in your machine to Angular 11 application.

• Node.js (Latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Installation and application creation

You can install Angular 11 using following command.

npm install @angular/cli@11.2.3

Create an Angular 11 application

1. Create a new Angular project by using the command ng new and navigate to that folder.

ng new angular11-app

cd angular11-app

2. Install the ej2-angular-inputs package through the npm install command.

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

3. Now, serve the application using below command.

ng serve 

Your application will open in browser in the http://localhost:4200. Refer to the following the below example screenshot for Angular 11 version.

Adding Angular 11 Slider

You can add the Angular 11 Slider component by using `ejs-slider` tag and the attributes used within this tag allows you to define other Slider functionalities.

1. Import SliderModule into app.module.ts file from the @syncfusion/ej2-angular-inputs package.

[app.module.ts]

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

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

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    SliderModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

2. Import the CSS styles of the Slider component.

[styles.css]

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

3. Add the Slider component in the template file.

[app.component.html]

<div style="width: 300px; margin: 50px;">

  <ejs-slider id="slider" value="50"></ejs-slider>

</div>

4. Run the application with the following below command and you should the see the below represented output of the EJ2 Angular Slider component.

ng serve --open

Ticks

Ticks is the important feature in Sliders, users can able to identify the current position and its value by just seeing the scale present just above or below the Slider track. You can enable “ticks” in Slider using the “ticks” property.

Define your “ticks” property in your component file as like below.

[app.component.ts]

export class AppComponent {

  ticks: TicksDataModel = {

    placement: 'Both', largeStep: 20,

    showSmallTicks: true, smallStep: 10

  }

}

Map the “ticks” property defined in the component to template file as like below.

[app.component.html]

<div style="width: 300px; margin: 50px;">

  <ejs-slider id="slider" value="50" [ticks]="ticks"></ejs-slider>

</div>

After mapping the properties, now you should see the Slider with ticks enabled when you run the application as shown in the following imagelike below.

Tooltip

EJ2 Slider has built-in Tooltip to display the current value of the slider, this feature will be particularly useful when the range difference between minimum and maximum value is large to identify the current value. You can enable “tooltip” in Slider using the “tooltip” property.

Define your “tooltip” property in your component file as like below.

[app.component.ts]

tooltip: TooltipDataModel = { isVisible: true }

[app.component.html]

<div style="width: 300px; margin: 50px;">

  <ejs-slider id="slider" value="50" [ticks]="ticks" [tooltip]="tooltip"></ejs-slider>

</div>

After mapping the properties, now you should see the Slider with tooltip enabled when you run the application as shown in the following imagelike below.

Summary

You can learn more about the Angular 11 Slider from the following below links.

GitHub repository of code used in this article can be found from here.

Checkout Angular 11 Slider features from here.

Checkout Angular 11 Slider documentation from here.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!