NpnSlider (A Multi Range Slider Angular Component)
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.
Usage
Html
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 |
@Input() disabled: string |
To disable the slider. Valid values: 'true' or 'disabled' or empty attribute |
@Input() multiRange: boolean |
To switch between Mutli range and Single range mode. Slider is multi range by default |
@Input() hide-tooltip: boolean |
To hide the tooltip that shows on hover of 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 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 |
Example and Sample Code
a) Import 'NpnSliderModule' in your app module
;
b) Add 'npn-slider' in your component html
c) Add a method in your component class to listen for onChange event from slider
/*Method to listen for onChange event from slider*/onSliderChangeselectedValues: number
d) You done. Run your app. cheers! View Demo