Drag Range Slider With NGX Slider Tutorial For Angular 14

Install an Angular app
npm install -g @angular/cli

The following command should be entered into the terminal to build a brand-new angular application:

ng new angular-demo

Obtain access to the angular project:

cd ng new angular-demo
Install ngx-slider Package

The ngx-slider package must now be added or installed into the angular application. Ideally, the npm command shown below may be used to do this:

npm i @angular-slider/ngx-slider
In the app module, add NgxSliderModule

the following code should be added to the app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxSliderModule } from '@angular-slider/ngx-slider';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }
Simple Range Drag Slider implementation

Place the following code in the file app.component.ts:

import { Component } from '@angular/core';
import { Options  } from '@angular-slider/ngx-slider';

  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

Access the file app.component.html and insert the aforementioned

<div class="set_slider pt-5">
  <h2 class="text-center">ngx-slider</h2>
  <div class="manage_input">
      <input type="text" [value]="minValue" />
      <input type="text" [value]="maxValue" />
NGX Slider Custom Style Add
// We need to use ::ng-deep to overcome view encapsulation
::ng-deep {
  .set_slider .ngx-slider .ngx-slider-bar {
    background: #ffe4d1;
    height: 5px;
  .set_slider .ngx-slider .ngx-slider-selection {
    background: orange;

  .set_slider .ngx-slider .ngx-slider-pointer {
    width: 10px;
    height: 15px;
    top: auto; /* to remove the default positioning */
    bottom: 0;
    background-color: blue;

  .set_slider .ngx-slider .ngx-slider-pointer:after {
    display: none;

  .set_slider .ngx-slider .ngx-slider-bubble {
    bottom: 14px;

  .set_slider .ngx-slider .ngx-slider-limit {
    font-weight: bold;
    color: red;

  .set_slider .ngx-slider .ngx-slider-tick {
    width: 1px;
    height: 15px;
    margin-left: 4px;
    border-radius: 0;
    background: black;
    top: -1px;

  .set_slider .ngx-slider .ngx-slider-tick.ngx-slider-selected {
    background: rgb(0, 110, 255);
  .set_slider {
    width: 70%;
    margin: 0 auto;
  .manage_input {
    display: flex;
    flex-direction: row;
    width: 448px;
    justify-content: space-evenly;
    font-weight: bold;
Run Angular App
ng serve

The lesson for the Angular range drag slider has ended; With the aid of the @angular-slider/ngx-slider library, we finally learnt how to add a drag range slider bar to an Angular application and how to configure the range slider in Angular through this thorough instruction.

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories