rm-range-slider
v5.0.0
Published
A highly optimized and fully customizable pure angular component for value range selection.
Downloads
104
Maintainers
Readme
Range-slider
A highly optimized and fully customizable pure angular component for value range selection.
The component is not re-rendered while user moves the thumb. Even if there is a label, only the label component is re-rendered when values are changed.
RangeSlider uses angular Native's Animated library to transform thumbs / label / selected rail. These optimizations help to achieve as much native look & feel as possible using only the JS layer.
Installation
Install rm-range-slider with npm or yarn
npm: npm install --save rm-range-slider
yarn: yarn add rm-range-slider
AND
npm: ng add @angular/material
yarn: yarn add @angular/material
Usage
Dual Range Slider uses angular hooks, so this component doesn't work with angular below below version 2.
<rm-range-slider
min="0"
max="100"
startValue="0"
endValue="10"
(onValueChanged)="onValueChanged($event)"
></rm-range-slider>
- Add
RmRangeSliderComponent
to imports array of component decorater meta - Define Function onValueChanged
onValueChanged
in component like this
import {RmRangeSliderModule} from "rm-range-slider";
@Component({
imports: [RmRangeSliderComponent],
})
public onValueChanged(currentAmount: MINMAX): void {
console.log(currentAmount);
}
Version Mapping
| Slider | Ng | |--------|------| | 0.0.1 | 14.x | | 1.0.0 | 15.x | | 2.0.0 | 16.x | | 3.0.0 | 17.x | | 4.0.0 | 18.x | | 5.0.0 | 19.x |
Properties
| Name | Description | Type | Default Value |
|------------------|----------------------------------------------------------------------------------|--------|:------------------------------------------------------------:|
| min
| Minimum value of slider | number | Initially min
value will be set 0
if not provided |
| max
| Maximum value of slider | number | Initially max
value will be set 100
if not provided |
| startValue
| deafult value for first slider | number | Initially startValue
value will be set 0
if not provided |
| endValue
| deafult value for second slider | number | Initially endValue
value will be set 10
if not provided |
| onValueChanged
| On change function onValueChanged
will send both value min and max to compoent | MINMAX | It do not return any value until changes |
Author services
Are you interested in this library but lacks features? Write to the author, he can do it for you.
Roadmap
rangeColor
- Set color for slider line between both min and max slider's thumnail.
sliderColor
- Set color for slider line.
sliderColorRight
- Set color for right side slider line