NpnSlider is a reusable range slider component using Angular v6.0. It can be used either as a multi range or a single range slider. By default, it is a multi range slider.

npm install --save npn-slider

yarn add npn-slider

<npn-slider [min]="2006" [max]="2020" (onChange)="onSliderChange($event)"></npn-slider>

a) Import 'NpnSliderModule' in your app module

import { NpnSliderModule } from "npn-slider";
  
@NgModule({
  imports:[
    ..
    NpnSliderModule
    ..
  ]
})

b) Add 'npn-slider' in your component html

<npn-slider [min]="1000" [max]="5000" (onChange)="onSliderChange($event)" [step]="500" [showStepIndicator]="true"></npn-slider>

c) Add a method in your component class to listen for onChange event from slider

/*Method to listen for onChange event from slider*/
onSliderChange(selectedValues: number[]) {
    this._currentValues = selectedValues;
}

d) You done. Run your app. cheers!