Throughout this comprehensive tutorial, you will learn how to integrate the range drag slider in angular with the ngx-slider package’s help.
The range slider shows numerical values between the two given numerical values in a horizontal bar, and It allows the users to choose one value from the given range.
Creating a range drag slider in angular is easy with the ngx-slider library; it allows you to create a robust yet flexible mobile-friendly slider component in the angular app. Apart from the simple range slider, you can create the following slider types in angular.
- Single slider
- Range slider
- Slider with ticks
- Customized slider
- Slider with custom style
- Vertical slider
How to Add Range Slider in Angular 11 App
- Step 1: Install Angular Project
- Step 2: Add ngx-slider Library
- Step 3: Inject NgxSliderModule in Main Module
- Step 4: Integrate Drag Range Slider in Angular
- Step 5: Create Date Range Slider
- Step 6: Customize Range Slider
- Step 7: Start Development Server
Install Angular Project
In the first step, use the recommended command to install angular CLI, but make sure you have node and npm tools on your system:
npm install -g @angular/cli
Now, install the angular app with angular CLI schematic:
ng new angular-range-slider-demo
Move into the project root:
cd ng new angular-range-slider-demo
Add Ngx Slider Library
Next, execute command to install ngx-slider library into the angular app:
npm i @angular-slider/ngx-slider
Inject NgxSliderModule in Main Module
Further, head over to angular’s main app module file and import the NgxSliderModule module so that you can use its features to build a range slider.
Update the app.module.ts file:
import { NgxSliderModule } from '@angular-slider/ngx-slider';
...
@NgModule({
...
imports: [
...
NgxSliderModule,
...
],
...
})
export class AppModule {}
Integrate Drag Range Slider in Angular
Create the range slider component by adding the ngx-slide directive in the HTML template, don’t forget to pass the options prop in the [options] property.
Update the app.component.html file:
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>
The options module allows you to set the drag range slider options, plus add the numerical value variable in the TypeScript file.
Update the app.component.ts file:
import { Component } from '@angular/core';
import { Options } from '@angular-slider/ngx-slider';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
value: number = 100;
options: Options = {
floor: 0,
ceil: 200
};
constructor() { }
}
Create Date Range Slider
In this step, you will create a simple date range slier, it will have options to choose one date from the two given date values.
Update the app.component.ts file:
import { Component } from '@angular/core';
import { Options, LabelType } from '@angular-slider/ngx-slider';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
customDate: Date[] = this.dateRange();
value: number = this.customDate[0].getTime();
options: Options = {
stepsArray: this.customDate.map((date: Date) => {
return { value: date.getTime() };
}),
translate: (value: number, label: LabelType): string => {
return new Date(value).toDateString();
}
};
dateRange(): Date[] {
const dates: Date[] = [];
for (let i: number = 1; i <= 31; i++) {
dates.push(new Date(2021, 6, i));
}
return dates;
}
constructor() { }
}
Update the app.component.html file:
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>
Add Custom Style in Range Slider
You can add the custom style in the range slider using CSS or SCSS.
Update the app.component.ts file:
import { Component } from '@angular/core';
import { Options } from '@angular-slider/ngx-slider';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() { }
minValue: number = 30;
maxValue: number = 75;
options: Options = {
floor: 0,
step: 10,
ceil: 100,
showTicks: true
};
}
Update the app.component.html file:
<div class="custom-slider">
<ngx-slider [options]="options" [(value)]="minValue" [(highValue)]="maxValue"></ngx-slider>
</div>
Update the app.component.scss file:
// We need to use ::ng-deep to overcome view encapsulation
::ng-deep {
.custom-slider .ngx-slider .ngx-slider-bar {
background: #22e4d2;
height: 6px;
}
.custom-slider .ngx-slider .ngx-slider-selection {
background: yellow;
}
.custom-slider .ngx-slider .ngx-slider-pointer {
width: 12px;
height: 16px;
top: auto; /* to remove the default positioning */
bottom: 0;
background-color: green;
}
.custom-slider .ngx-slider .ngx-slider-pointer:after {
display: none;
}
.custom-slider .ngx-slider .ngx-slider-bubble {
bottom: 15px;
}
.custom-slider .ngx-slider .ngx-slider-limit {
font-weight: bold;
color: orange;
}
.custom-slider .ngx-slider .ngx-slider-tick {
width: 1px;
height: 16px;
margin-left: 5px;
border-radius: 0;
background: black;
top: -1px;
}
.custom-slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {
background: rgb(0, 120, 155);
}
}
Start Development Server
Type command on the console and execute to run the angular app:
ng serve
You may use the following url to start the app:
http://localhost:4200
Conclusion
So, eventually, we have completed the angular range slider tutorial. In this guide, we step by step explained how to add a range drag slider in angular. Apart from this, we have learned to set up the basic angular app, adding and setting up the ngx slider module, creating and integrating simple, date range drag slider in angular.