How to Implement Range Slider in Angular

Implement Range Slider In Angular

Here we will see how can we Implement a Range slider in the Angular Application and manipulate its value using typescript.

Let’s start from the basics.

Firstly we will create an Angular Application with the below Command.

ng new angular-range-slider

now we have to add Boostrap Dependencies in our Project we can do this job in multiple ways.

here we will use Bootstrap CDN to perform our Task.

we have to add this below line in index.html

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

after that we need to import forms Module in app.module.ts as shown below.

imports: [FormsModule],

this module will import from.

import { FormsModule } from '@angular/forms';

Now let’s move to the component part.

in app.component.html we will write the below code.

<div class="col-md-12" style="padding: 100px;">
  <label for="customRange1" class="form-label">Range Slider</label>
  <div>
    <input style="width: 50%;" [(ngModel)]="rangeValue" min="0" max="100" type="range" class="form-range" id="customRange1">
  </div>

  <div style="padding-top: 50px;">
    <label for="rangesetbox">Range value</label>
    <input id="rangesetbox" type="text" [(ngModel)]="rangeValue" change="getRange($event)">
  </div>
</div>

now move into the app.component.ts file.

we declare one variable here

rangeValue: number = 0;

now write below function.

getRange(event: any){
 this.rangeValue = event.target.value;
}

let’s understand what the above code will do and how can we use it.

The HTML file creates Range Slider and Input box. Whatever value we set on Range Slider we can See in Input Box and whatever value we type in Input box it will set on range Box.

here we can see the working Demo below video it will give you some more idea.