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 :</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 :</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