How to get started easily with Syncfusion Angular 9 Slider?
The Essential JS2 Angular Slider component is used to allow 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 how to easily get started with EJ2 Slider component in Angular 9 project with minimal code.
Prerequisites
Before starting, the following tools and SDK needs to be installed in your machine to Angular 9 application.
- Node.js (v8.10.0 or above)
- Angular 9
- Angular CLI
Installation and application creation
You can install Angular CLI 9 using the following command.
npm install -g @angular/cli@9.0.2 |
Note:
To follow and run the application in Angular 8 or earlier version, you can replace the CLI command version with your preferred version and install it.
npm install -g @angular/cli@<CLI VERSION> |
Create an Angular 9 application
ng new slider-angular9 cd slider-angular9 |
Installing EJ2 Slider
npm install @syncfusion/ej2-angular-inputs |
Serve the application
ng serve --open |
Your application will open in browser in the http://localhost:4200. Refer to the following example screenshot for Angular 9 version.
Adding Angular 9 Slider
You can add the Angular 9 Slider component by using `ejs-slider` tag and the attributes used ithin this tag allows you to define other Slider functionalities.
- 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 { } |
- Import the CSS styles of the Slider component.
[style.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'; |
- 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> |
- Run the application with the following 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 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 the “ticks” property in your component file as 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 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, you should see the Slider with ticks enabled when you run the application as shown in the following image.
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 the “tooltip” property in your component file as 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, you should see the Slider with tooltip enabled when you run the application as shown in the following image.
Summary
Refer to our documentation and online samples for more features. If you have any queries, 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!
