Press "Enter" to skip to content

A Multi-Range Slider Component Using Angular | NpnSlider

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

AttributesDescription
@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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.