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.