How to get started easily with Syncfusion Angular 11 Slider?

This article explains how to easily get started with EJ2 Slider component in an Angular 11 project with minimal code. 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. 

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/[email protected]

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 command below, and you should see the output below, represented the EJ2 Angular Slider component.

ng serve --open

Screenshot: 

Ticks

Ticks is the important feature in Sliders, users can identify the current position and its value by simply looking at 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 image 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 documentation from here.

Conclusion

I hope you enjoyed learning how to get started easily with Syncfusion Angular 11 Slider

You can refer to our Angular feature tour page to know about its other groundbreaking feature representations. You can also explore our Angular Slider example to understand how to present and manipulate data.

For current customers, you can check out our Angular components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Angular Scheduler and other Angular components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!