How to get started easily with Syncfusion Angular 7 Slider?
EJ2 Slider with Angular 7 KB
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 explainsIn this knowledge base, we are going to learn how to easily get started with EJ2 Slider component in Angular 7 project with minimal code.
Prerequisites
Before we starting, the following tools and SDK needs to be installed in yourthe machine to Angular 7 application.
- Node.js (v8.10.0 or above)
- Angular 7
- Angular CLI
Installation and application creation
You can install Angular CLI 7 using the following command.
npm install -g @angular/[email protected] |
Note:
If you would like tTo follow and run the application in Angular 6 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 7 application
ng new slider-angular7 cd slider-angular7 |
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 the below example screenshot for Angular 7 version.
Adding Angular 7 Slider
You can add the Angular 7 Slider component by using `ejs-slider` tag and the attributes used within 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 followingbelow 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 theyour “ticks” property in your component file aslike 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 aslike 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 theyour “tooltip” property in your component file aslike 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 7 Slider from the followingbelow links.
GitHub repository of code used in this article can be found from here.
Checkout Angular 7 Slider features from here.
Checkout Angular 7 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!
