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.
angular multi range slider, ngx slider, angular material multi range slider, custom range slider angular, angular material range slider, price range slider angular 9
Creative Concentric Circular Range Slider With JavaScript
How to make use of it:
Installation
npm install --save npn-slider or yarn add npn-slider
Usage
<npn-slider [min]="2006" [max]="2020" (onChange)="onSliderChange($event)"></npn-slider>
Attributes
| Attributes | Description |
|---|---|
| @Input() min: number | The minimum value of the slider |
| @Input() max: number | The maximum value of the slider |
| @Input() step: number | The value at which the slider value should change |
| @Input() showStepIndicator: boolean | Whether the step indicator should display or not |
| @Input() minSelected: number | The selected value for the slider’s left handler |
| @Input() maxSelected: number | The selected value for the slider’s right handler |
| @Input() disabled: string | To disable the slider. Valid values: ‘true’ or ‘disabled’ or empty attribute |
| @Input() multiRange: boolean | To switch between Multi range and Single range mode. Slider is multi-range by default |
| @Input() hide-tooltip: boolean | To hide the tooltip that shows on the hover of the slider handler. Default value: ‘false’ |
| @Input() hide-values: boolean | To hide values displayed at bottom of slider. Default value: ‘false’ |
| @Output() onChange: EventEmitter<number[]>() | The event will be fired on a change of a selected range of values. Returns: Selected range of values as an array[], On Single range mode, a number array with a single value will be returned |
Multi Range Slider Component For Angular, NpnSlider Plugin/Github, ngx mat range slider example
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.
