Angular 13 Drag Range Slider with NGX Slider Tutorial

Angular 13 drag range slider bar tutorial; In this quick tutorial, we will share how to create a drag range slider bar using the npm @angular-slider/ngx-slider package from the absolute beginning.

The ngx-slider is an excellent library available through the node package manager. It helps you build a robust, self-contained, mobile-friendly drag slider component in an Angular 6+ application.

You can create various drag single simple slider, range slider, ticks, vertical slider, dynamic option slider. Moreover, the drag ngx slider supports reactive forms, and adding custom styling is also immensely easy.

The range slider widget is a user interface component, and it allows users to choose a numeric value from the offered minimum and maximum range values.

Through this angular range slider example, we will try to learn how to integrate the range drag slider in angular using the ngx slider library.

Angular 13 Drag Range Slider Example

• Step 1: Set Up Angular App
• Step 2: Install ngx-slider Package
• Step 3: Add NgxSliderModule in App Module
• Step 4: Implement Simple Range Drag Slider
• Step 5: Drag Date Range Slider
• Step 6: Add Custom Style in NGX Slider
• Step 7: Range Slider Directive and Options
• Step 8: Run Angular App

Set Up Angular App

Make sure you have node, npm and angular CLI installed on your system. You can use the suggested command to add angular cli on your machine:

npm install -g @angular/cli

Next, execute command from the terminal to create a fresh new angular application:

ng new angular-demo

Get inside the angular project:

cd ng new angular-demo

Install ngx-slider Package

Now, you require to add or install the ngx-slider package into the angular application. Ideally, this can be done using the following npm command:

npm i @angular-slider/ngx-slider

Add NgxSliderModule in App Module

In the next step, you need to import NgxSliderModule from ‘angular-slider/ngx-slider’ package, moreover register this module into the imports array as well.

Place the following code into the app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NgxSliderModule } from '@angular-slider/ngx-slider';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxSliderModule],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Implement Simple Range Drag Slider

All the imperatives have been considered; now, you can create the simple range slider component in angular. Inside the TypeScript template, import the options module from the @angular-slider/ngx-slider package, declare a numerical value, set it to 100, create an options object, and define the properties as given below.

Head over to app.component.ts file, and place the suggested code:

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() { }
  
}

You need to declare the ngx-slider directive and pass the options, likewise, the value properties within the directive, to build the range slider.

Get to the app.component.html file, and add the suggested code:

<ngx-slider [(value)]="value" [options]="options"></ngx-slider>

Drag Date Range Slider

With ngx slider you can effortlessly create a date range slider, a user can choose the date from the two date ranges. Creating the date range component is easy, update the HTML and TypeScript templates simultaneously.

<ngx-slider [(value)]="value" [options]="options"></ngx-slider>

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 {

  dateRange: Date[] = this.customDateRange();
  value: number = this.dateRange[0].getTime();

  constructor() { }

  options: Options = {
    stepsArray: this.dateRange.map((date: Date) => {
      return { value: date.getTime() };
    }),
    translate: (value: number, label: LabelType): string => {
      return new Date(value).toDateString();
    }
  };

  customDateRange(): Date[] {
    const dates: Date[] = [];
    for (let i: number = 1; i <= 31; i++) {
      dates.push(new Date(2021, 6, i));
    }
    return dates;
  }
  
}

Add Custom Style in NGX Slider

In this step, we will learn to add custom style in the ngx drag slider hence and update the following code in the angular HTML component.

<div class="custom-slider">
  <ngx-slider [(value)]="minValue" [(highValue)]="maxValue" [options]="options"></ngx-slider>
</div>

Update the TypeScript template with the given code:

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 {

  minValue: number = 20;
  maxValue: number = 80;
  options: Options = {
    floor: 0,
    ceil: 100,
    step: 10,
    showTicks: true
  };

  constructor() { }
  
}

Furthermore, add the following CSS code in the scss or CSS template:

// We need to use ::ng-deep to overcome view encapsulation
::ng-deep {
    .custom-slider .ngx-slider .ngx-slider-bar {
      background: #ffe4d1;
      height: 5px;
    }
    .custom-slider .ngx-slider .ngx-slider-selection {
      background: orange;
    }
  
    .custom-slider .ngx-slider .ngx-slider-pointer {
      width: 10px;
      height: 15px;
      top: auto; /* to remove the default positioning */
      bottom: 0;
      background-color: blue;
    }
  
    .custom-slider .ngx-slider .ngx-slider-pointer:after {
      display: none;
    }
  
    .custom-slider .ngx-slider .ngx-slider-bubble {
      bottom: 14px;
    }
  
    .custom-slider .ngx-slider .ngx-slider-limit {
      font-weight: bold;
      color: red;
    }
  
    .custom-slider .ngx-slider .ngx-slider-tick {
      width: 1px;
      height: 15px;
      margin-left: 4px;
      border-radius: 0;
      background: black;
      top: -1px;
    }
  
    .custom-slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {
      background: rgb(0, 110, 255);
    }
  }

Range Slider Directive and Options

Here are the slider inputs and outputs that can be directly added to enhance the range slider functionalities.

<ngx-slider
  [(value)]="<number>"
  [(highValue)]="<number>"
  [options]="<options object>"
  [manualRefresh]="<event emitter>"
  [triggerFocus]="<event emitter>"
  (userChangeStart)="<event handler>"
  (userChange)="<event handler>"
  (userChangeEnd)="<event handler>"
  (valueChange)="<event handler>"
  (highValueChange)="<event handler>"
></ngx-slider>

options is an object of options that configure the slider (for instance. minimum, maximum values, legend values, etc.). Here are the more options available in the Options class.

Run Angular App

You have to start the angular development server using the following command:

ng serve

Give below url displayed on the terminal screen that you can type on the browser’s address bar to start the app:

http://localhost:4200

Conclusion

The Angular range drag slider tutorial is over; Through this comprehensive guide, we finally learned how to easily add drag range slider bar in the angular app with the help of @angular-slider/ngx-slider library, also how to customize the range slider in angular.