npn-slider
TypeScript icon, indicating that this package has built-in type declarations

1.3.2 • Public • Published

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.

View Release Notes

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

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

b) Add 'npn-slider' in your component html

<npn-slider [min]="1000" [max]="5000" (onChange)="onSliderChange($event)" [step]="500" [showStepIndicator]="true"></npn-slider>

c) Add a method in your component class to listen for onChange event from slider

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

d) You done. Run your app. cheers! View Demo

Package Sidebar

Install

npm i npn-slider

Weekly Downloads

288

Version

1.3.2

License

MIT

Unpacked Size

583 kB

Total Files

30

Last publish

Collaborators

  • nupin