@eff-custom-plugins/range-slider

Range Slider

Range slider is a multiple range slider component using Angular v14.0.5. It can be used either as a multi range or a single range slider. By default, it is a multi range slider.

Installation

NPM

npm i @eff-custom-plugins/range-slider

Usage

Html

<range-slider [min]="2006" [max]="2020" [leftHandlersPositions]="[2006, 2009, 2014]" [rightHandlersPositions]="[2007, 2012, 2019]" [stepRange]="100"></range-slider>

Attributes

Attributes	Description
@Input() stepRange: number	The value at which slider value should change. Default value: 100
@Input() min: number	The minimum value of slider
@Input() max: number	The maximum value of slider
@Input() leftHandlersPositions: number[]	Sliders' left handler positions array.
@Input() rightHandlersPositions: number[]	Sliders' right handler positions array.
@Input() disabled: boolean	To disable slider. Default value: 'false'
@Input() hide-tooltip: boolean	To hide the tooltip that shows on top of slider handler. 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[].

Example and Sample Code

1. Import 'RangeSliderModule' in your app module

import { RangeSliderModule } from "@eff-custom-plugins/range-slider";
  
@NgModule({
  imports:[
    ..
    RangeSliderModule
    ..
  ]
})

2. Add main style and hammer script to your app

"styles": [
  ..
  "node_modules/@eff-custom-plugins/range-slider/lib/assets/css/main.scss",
  ..
],

"scripts": [
  ..
  "node_modules/@eff-custom-plugins/range-slider/lib/assets/js/hammer.js",
  ..
],

3. Add 'range-slider' in your component html

<range-slider [min]="2006" [max]="2020" [leftHandlersPositions]="[2006, 2009, 2014]" [rightHandlersPositions]="[2007, 2012, 2019]" [stepRange]="100"></range-slider>

4. 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;
}

5. You done. Run your app. cheers!