How To Implement Multi-Range Slider In Angular

Step1: Create New Angular Application.

ng new demo

Step2: Now, run below command and install NpnSlider plugin.

npm install --save npn-slider

Step3: Import in app.module.ts

import { NpnSliderModule } from "npn-slider";

imports: [NpnSliderModule]

Step4: Create New component

ng g c FilterAge

Step5: Write below code in your filter-age.component.html

<div class="row">
    <div>
        <npn-slider class="age-slider" [min]="10" [max]="100" [minSelected]="minAge" [maxSelected]="maxAge" (onChange)="onSliderChange($event)" [step]="10" [hide-tooltip]="true" [showStepIndicator]="true"></npn-slider>
    </div>
    <div class="col set-age-column">
        <label class="txt-lable-min-max">Min &nbsp;:</label>
        <input (keypress)="numberOnly($event)" type="text" class="txt-min-max" [(ngModel)]="minAge" (change)="getAgeValue()">
    </div>
    <div class="col set-age-column">
        <label class="txt-lable-min-max">Max &nbsp;:</label>
        <input (keypress)="numberOnly($event)" type="text" class="txt-min-max" [(ngModel)]="maxAge" (change)="getAgeValue()">
    </div>
</div>

Step6: Write below code in your filter-age.component.ts

import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-filter-age',
  templateUrl: './filter-age.component.html',
  styleUrls: ['./filter-age.component.css']
})
export class FilterAgeComponent implements OnChanges {

  minAge!:number;
  min:number = 0;
  maxAge!:number;
  max:number = 0;
  ageObj!: {};
  @Output() ageData = new EventEmitter<{}>();
  @Input('selectedAge') selectAge = {};
  
  constructor(private _toastrService: ToastrService) { }

  ngOnChanges(): void {
    let data =  JSON.parse(JSON.stringify(this.selectAge));
    this.min = data.options.min;
    this.minAge = data.options.min;
    this.max = data.options.max;
    this.maxAge = data.options.max;
  }

  numberOnly(event:any): boolean
  {
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    }
    return true;
  }

  getAgeValue(){
    if(this.minAge >= this.min && this.maxAge <= this.max){
        this.ageObj = {
          "Min": this.minAge,
          "Max": this.maxAge
        }
        this.ageData.emit(this.ageObj);
    }
    else{
        this._toastrService.warning('The min value is ' + this.min + ' max value is' + this.max);
    }
  }

  onSliderChange(event:any) {
    this.minAge = event[0];
    this.maxAge = event[1];
  }

}

Step7: Add below CSS in filter-age.component.css

.txt-lable-min-max{
    color: white;
    opacity: 0.8;
}

.txt-min-max{
    border-radius: 4px;
    color: white;
    background-color: #272727;
    border: 0;
    width: 100%;
    height: 31px;
}

.set-age-column{
    display: flex;
    flex-direction: column;
}

.txt-min-max:focus-visible{
    outline: 0px solid #272727 !important;
}

::ng-deep .age-slider .slider .bar .left-handle,::ng-deep .age-slider .slider .bar .right-handle{
    width: 0px !important; 
    height: 0px !important;
    border: 7px solid #3b3b3a !important;
    border-radius: 0% !important;
    top: -12px !important;
    margin-left: -6px !important;
    border-top: 10px solid #40fee1 !important;
    border-bottom: 0px !important;
}

::ng-deep .age-slider .slider .bar div.filler > span{
    background: #40fee1 !important;
}

  ::ng-deep .age-slider .slider .bar{
    background: #787878 !important;
    height: 6px !important;
    box-shadow: inset 0px 0px 0px #333 !important;
  }

::ng-deep .age-slider .slider .bar div.filler{
    border: 0px solid #bedcb2 !important;
}

::ng-deep .age-slider .slider .bar div.filler > div.step-indicators > span{
    background:#787878 !important;
}

::ng-deep .age-slider .slider .bar > span.left-handle .handle-tooltip,::ng-deep .age-slider .slider .bar > span.right-handle .handle-tooltip{
    display: block;
    position: absolute;
    top: -39px !important;
    left: -14px !important;
    border: 1px solid #40fee1 !important;
    border-radius: 4px;
    padding: 1px 4px;
    min-width: 20px;
    text-align: center;
    background: #3d3d3d !important;
    color: #40fee1 !important;
    font-weight: 700;
    transition: opacity .2s ease;
    opacity: 0;
}

::ng-deep .age-slider .slider .bar > span.left-handle .handle-tooltip:before,::ng-deep .age-slider .slider .bar > span.right-handle .handle-tooltip:before{
    border-top-color: #40fee1 !important;
}
  
::ng-deep .age-slider .slider .bar> span.left-handle .handle-tooltip:after,::ng-deep .age-slider .slider .bar> span.right-handle .handle-tooltip:after{
    border-top-color: #40fee1 !important;
}

::ng-deep .age-slider .slider .values{
    display: none !important;
}

Ste8: Now, run project npm start see, output

 

Submit a Comment

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

Subscribe

Select Categories