rm-range-slider 3.0.3 → 4.0.0
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
CHANGED
|
@@ -14,7 +14,10 @@ Install rm-range-slider with npm or yarn
|
|
|
14
14
|
|
|
15
15
|
```bash
|
|
16
16
|
npm: npm install --save rm-range-slider
|
|
17
|
-
yarn: yarn add
|
|
17
|
+
yarn: yarn add rm-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,21 +36,47 @@ 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 |
|
|
43
|
-
|
|
57
|
+
|--------|------|
|
|
44
58
|
| 0.0.1 | 14.x |
|
|
45
59
|
| 1.0.0 | 15.x |
|
|
46
60
|
| 2.0.0 | 16.x |
|
|
47
61
|
| 3.0.0 | 17.x |
|
|
62
|
+
| 4.0.0 | 18.x |
|
|
48
63
|
|
|
49
64
|
### Properties
|
|
50
65
|
|
|
51
|
-
| Name | Description
|
|
52
|
-
|
|
53
|
-
| `min` | Minimum value of slider
|
|
54
|
-
| `max` | Maximum value of slider
|
|
55
|
-
| `startValue` |
|
|
56
|
-
| `endValue` |
|
|
57
|
-
| `onValueChanged` |
|
|
66
|
+
| Name | Description | Type | Default Value |
|
|
67
|
+
|------------------|----------------------------------------------------------------------------------|--------|:------------------------------------------------------------:|
|
|
68
|
+
| `min` | Minimum value of slider | number | Initially `min` value will be set `0` if not provided |
|
|
69
|
+
| `max` | Maximum value of slider | number | Initially `max` value will be set `100` if not provided |
|
|
70
|
+
| `startValue` | deafult value for first slider | number | Initially `startValue` value will be set `0` if not provided |
|
|
71
|
+
| `endValue` | deafult value for second slider | number | Initially `endValue` value will be set `10` if not provided |
|
|
72
|
+
| `onValueChanged` | On change function `onValueChanged` will send both value min and max to compoent | MINMAX | It do not return any value until changes |
|
|
73
|
+
|
|
74
|
+
## Author services
|
|
75
|
+
|
|
76
|
+
Are you interested in this library but lacks features? Write to the author, he can do it for you.
|
|
77
|
+
|
|
78
|
+
## Roadmap
|
|
79
|
+
|
|
80
|
+
`rangeColor` - Set color for slider line between both min and max slider's thumnail.
|
|
81
|
+
`sliderColor` - Set color for slider line.
|
|
82
|
+
`sliderColorRight` - Set color for right side slider line
|
|
@@ -80,8 +80,8 @@ export class RmRangeSliderComponent {
|
|
|
80
80
|
this.destroy$.next();
|
|
81
81
|
this.destroy$.complete();
|
|
82
82
|
}
|
|
83
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
84
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
83
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RmRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
84
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.4", type: RmRangeSliderComponent, isStandalone: true, selector: "rm-range-slider", inputs: { startValue: ["startValue", "startValue", numberAttribute], endValue: ["endValue", "endValue", numberAttribute], min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute] }, outputs: { onValueChanged: "onValueChanged" }, ngImport: i0, template: `
|
|
85
85
|
<mat-slider
|
|
86
86
|
[min]="this.min"
|
|
87
87
|
[max]="this.max"
|
|
@@ -95,7 +95,7 @@ export class RmRangeSliderComponent {
|
|
|
95
95
|
</mat-slider>
|
|
96
96
|
`, isInline: true, styles: ["mat-slider{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
97
97
|
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RmRangeSliderComponent, decorators: [{
|
|
99
99
|
type: Component,
|
|
100
100
|
args: [{ selector: 'rm-range-slider', standalone: true, imports: [MatSliderModule, FormsModule], template: `
|
|
101
101
|
<mat-slider
|
|
@@ -81,8 +81,8 @@ class RmRangeSliderComponent {
|
|
|
81
81
|
this.destroy$.next();
|
|
82
82
|
this.destroy$.complete();
|
|
83
83
|
}
|
|
84
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
85
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "
|
|
84
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RmRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
85
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.4", type: RmRangeSliderComponent, isStandalone: true, selector: "rm-range-slider", inputs: { startValue: ["startValue", "startValue", numberAttribute], endValue: ["endValue", "endValue", numberAttribute], min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute] }, outputs: { onValueChanged: "onValueChanged" }, ngImport: i0, template: `
|
|
86
86
|
<mat-slider
|
|
87
87
|
[min]="this.min"
|
|
88
88
|
[max]="this.max"
|
|
@@ -96,7 +96,7 @@ class RmRangeSliderComponent {
|
|
|
96
96
|
</mat-slider>
|
|
97
97
|
`, isInline: true, styles: ["mat-slider{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
98
98
|
}
|
|
99
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
99
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RmRangeSliderComponent, decorators: [{
|
|
100
100
|
type: Component,
|
|
101
101
|
args: [{ selector: 'rm-range-slider', standalone: true, imports: [MatSliderModule, FormsModule], template: `
|
|
102
102
|
<mat-slider
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rm-range-slider",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "A highly optimized and fully customizable pure angular component for value range selection.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
"url": "https://github.com/malikrajat/rm-range-slider"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
|
-
"@angular/common": "^
|
|
36
|
-
"@angular/core": "^
|
|
37
|
-
"@angular/material": "^
|
|
35
|
+
"@angular/common": "^18.1.4",
|
|
36
|
+
"@angular/core": "^18.1.4",
|
|
37
|
+
"@angular/material": "^18.1.4"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"tslib": "^2.3.0"
|