rm-range-slider 3.0.3 → 3.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,6 +15,9 @@ Install rm-range-slider with npm or yarn
|
|
|
15
15
|
```bash
|
|
16
16
|
npm: npm install --save rm-range-slider
|
|
17
17
|
yarn: yarn add rn-range-slider
|
|
18
|
+
AND
|
|
19
|
+
npm: ng add @angular/material
|
|
20
|
+
yarn: yarn add @angular/material
|
|
18
21
|
```
|
|
19
22
|
|
|
20
23
|
## Usage
|
|
@@ -22,11 +25,7 @@ Install rm-range-slider with npm or yarn
|
|
|
22
25
|
Dual Range Slider uses angular hooks, so this component doesn't work with angular below below version 2.
|
|
23
26
|
|
|
24
27
|
```
|
|
25
|
-
...
|
|
26
28
|
|
|
27
|
-
import {RmRangeSliderModule} from "rm-range-slider";
|
|
28
|
-
|
|
29
|
-
...
|
|
30
29
|
<rm-range-slider
|
|
31
30
|
min="0"
|
|
32
31
|
max="100"
|
|
@@ -37,6 +36,21 @@ import {RmRangeSliderModule} from "rm-range-slider";
|
|
|
37
36
|
|
|
38
37
|
```
|
|
39
38
|
|
|
39
|
+
1. Add `RmRangeSliderComponent` to imports array of component decorater meta
|
|
40
|
+
2. Define Function onValueChanged `onValueChanged` in component like this
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
import {RmRangeSliderModule} from "rm-range-slider";
|
|
44
|
+
|
|
45
|
+
@Component({
|
|
46
|
+
imports: [RmRangeSliderComponent],
|
|
47
|
+
})
|
|
48
|
+
public onValueChanged(currentAmount: MINMAX): void {
|
|
49
|
+
console.log(currentAmount);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
|
|
40
54
|
### Version Mapping
|
|
41
55
|
|
|
42
56
|
| Slider | Ng |
|
|
@@ -48,10 +62,20 @@ import {RmRangeSliderModule} from "rm-range-slider";
|
|
|
48
62
|
|
|
49
63
|
### Properties
|
|
50
64
|
|
|
51
|
-
| Name | Description
|
|
52
|
-
| ---------------- |
|
|
53
|
-
| `min` | Minimum value of slider
|
|
54
|
-
| `max` | Maximum value of slider
|
|
55
|
-
| `startValue` |
|
|
56
|
-
| `endValue` |
|
|
57
|
-
| `onValueChanged` |
|
|
65
|
+
| Name | Description | Type | Default Value |
|
|
66
|
+
| ---------------- | -------------------------------------------------------------------------------- | ------ | :----------------------------------------------------------: |
|
|
67
|
+
| `min` | Minimum value of slider | number | Initially `min` value will be set `0` if not provided |
|
|
68
|
+
| `max` | Maximum value of slider | number | Initially `max` value will be set `100` if not provided |
|
|
69
|
+
| `startValue` | deafult value for first slider | number | Initially `startValue` value will be set `0` if not provided |
|
|
70
|
+
| `endValue` | deafult value for second slider | number | Initially `endValue` value will be set `10` if not provided |
|
|
71
|
+
| `onValueChanged` | On change function `onValueChanged` will send both value min and max to compoent | MINMAX | It do not return any value until changes |
|
|
72
|
+
|
|
73
|
+
## Author services
|
|
74
|
+
|
|
75
|
+
Are you interested in this library but lacks features? Write to the author, he can do it for you.
|
|
76
|
+
|
|
77
|
+
## Roadmap
|
|
78
|
+
|
|
79
|
+
`rangeColor` - Set color for slider line between both min and max slider's thumnail.
|
|
80
|
+
`sliderColor` - Set color for slider line.
|
|
81
|
+
`sliderColorRight` - Set color for right side slider line
|