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

$3

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

Usage

$3

`html

`

$3

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() | The event will be fired on change of selected range of values.
_Returns: Selected range of values as an array[]._

$3

1) Import _'RangeSliderModule'_ in your app module
`ts
import { RangeSliderModule } from "@eff-custom-plugins/range-slider";

@NgModule({
imports:[
..
RangeSliderModule
..
]
})
`

2) Add _main_ style and _hammer_ script to your app

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

`ts
"scripts": [
..
"node_modules/@eff-custom-plugins/range-slider/lib/assets/js/hammer.js",
..
],
`
3) Add _'range-slider'_ in your component html
`html

`

4) Add a method in your component class to listen for onChange event from slider
`ts
/Method to listen for onChange event from slider/
onSliderChange(selectedValues: number[]) {
this._currentValues = selectedValues;
}
``

5) You done. Run your app. cheers!