Skip to content

npnm/NpnSlider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b129b01 · May 29, 2022
May 29, 2022
May 23, 2022
May 23, 2022
Jul 4, 2018
May 23, 2022
May 29, 2022
Jun 30, 2018
Jun 30, 2018
Sep 6, 2019
Aug 23, 2018
Nov 15, 2019
May 23, 2022
May 21, 2022
May 23, 2022
May 23, 2022
May 21, 2022
May 21, 2022

Repository files navigation

NpnSlider (A Multi Range Slider Component)

NPM Version License Build Status

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.

Installation

npm install --save npn-slider
yarn add npn-slider

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(selectedValues: number[]) {
    this._currentValues = selectedValues;
}

d) You done. Run your app. cheers!