npn-slider

NpnSlider (A Multi Range Slider Angular Component)

NpnSlider is reusable multi range slider component using Angular6

Installation

NPM

npm install --save npn-slider

Usage

Html

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

Attributes

Attributes	Description
@Input() min: number	The minimum value of slider
@Input() max: number	The maximum value of slider
@Input() step: number	The value at which slider value should change
@Input() showStepIndicator: boolean	Whether the step indicator should display or not
@Input() minSelected: number	The selected value for slider's left handler
@Input() maxSelected: number	The selected value for slider's right handler
@Output() onChange: EventEmitter<number[]>()	The event will be fired on change of selected range of values

Sample Code

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

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