A Multi-Range Slider Component Using Angular 7+

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

multi range slider angular material, range slider for angular 7, custom range slider angular, angular range slider, multi range slider react

How to make use of it:


npm install --save npn-slider

yarn add npn-slider


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


min: number
The minimum value of slider
max: number
The maximum value of slider
step: number
The value at which slider value should change
showStepIndicator: boolean
Whether the step indicator should display or not
minSelected: number
The selected value for slider’s left handler
maxSelected: number
The selected value for slider’s right handler
disabled: string
To disable the slider. Valid values: ‘true’ or ‘disabled’ or empty attribute
multiRange: boolean
To switch between Mutli range and Single range mode. Slider is multi range by default
hide-tooltip: boolean
To hide the tooltip that shows on hover of slider handler. Default value: ‘false’
hide-values: boolean
To hide values displayed at bottom of slider. Default value: ‘false’
onChange: EventEmitter<number[]>()
The event will be fired on change of selected range of values.
Returns: Selected range of values as an array[],
On Single range mode, a number array with single value will be returned

Multi Range Slider Component, NpnSlider Plugin/Github

See Demo And Download

Official Website(npnm): Click Here

This superior jQuery/javascript plugin is developed by npnm. For extra Advanced Usage, please go to the official website.