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';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxSliderModule
  ],
  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';

@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
  };
}

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

<div class="set_slider pt-5">
  <h2 class="text-center">ngx-slider</h2>
  <ngx-slider
    [(value)]="minValue"
    [(highValue)]="maxValue"
    [options]="options"
  ></ngx-slider>
  <div class="manage_input">
    <div>
      <label>Min:</label>
      <input type="text" [value]="minValue" />
    </div>
    <div>
      <label>Max:</label>
      <input type="text" [value]="maxValue" />
    </div>
  </div>
</div>

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;
  }
  label{
    font-weight: bold;
  }
}

Run Angular App

ng serve

Conclusion

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.