custom dropdown plugin
npm install @eff-custom-plugins/range-sliderRange 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.
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!