rm-range-slider 7.0.0 → 8.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 +44 -1
- package/fesm2022/rm-range-slider.mjs +127 -127
- package/package.json +167 -167
- package/types/rm-range-slider.d.ts +52 -52
package/README.md
CHANGED
|
@@ -52,6 +52,8 @@ A lightweight, highly optimized, and fully customizable pure Angular component f
|
|
|
52
52
|
- [Quick Start / Usage](./docs/USAGE.md)
|
|
53
53
|
- [API Reference](./docs/API.md)
|
|
54
54
|
- [Advanced Configuration](./docs/ADVANCED_CONFIGURATION.md)
|
|
55
|
+
- [Dependency Overview](#dependency-overview)
|
|
56
|
+
- [Compatibility](#compatibility)
|
|
55
57
|
- [Peer Dependencies](./docs/PEER_DEPENDENCIES.md)
|
|
56
58
|
- [Best Practices](./docs/BEST_PRACTICES.md)
|
|
57
59
|
- [Performance Optimization](./docs/OPTIMIZATION.md)
|
|
@@ -65,7 +67,6 @@ A lightweight, highly optimized, and fully customizable pure Angular component f
|
|
|
65
67
|
- [Changelog](./CHANGELOG.md)
|
|
66
68
|
- [License](./LICENSE)
|
|
67
69
|
- [Examples](./examples/README.md)
|
|
68
|
-
- [Usage Examples](./docs/USAGE.md)
|
|
69
70
|
|
|
70
71
|
|
|
71
72
|
## Features
|
|
@@ -190,6 +191,48 @@ export class ExampleComponent {
|
|
|
190
191
|
|
|
191
192
|
</div>
|
|
192
193
|
|
|
194
|
+
## Dependency Overview
|
|
195
|
+
|
|
196
|
+
**rm-range-slider** is designed to be lightweight with minimal dependencies.
|
|
197
|
+
|
|
198
|
+
- **Zero Runtime Dependencies**: The library has no external runtime dependencies. It relies only on the Angular framework itself.
|
|
199
|
+
- **Peer Dependencies**: It requires `@angular/core`, `@angular/common`, and `@angular/material` as peer dependencies, which are standard in most Angular projects.
|
|
200
|
+
- **Development Dependencies**: All other dependencies are for development, testing, and building the library, and are not included in the final bundle.
|
|
201
|
+
|
|
202
|
+
---
|
|
203
|
+
|
|
204
|
+
## Compatibility
|
|
205
|
+
|
|
206
|
+
### 2.1 Angular Version Support
|
|
207
|
+
|
|
208
|
+
This library is compatible with a wide range of Angular versions:
|
|
209
|
+
|
|
210
|
+
- **Supported Versions**: `Angular >=14.0.0 <21.0.0`
|
|
211
|
+
|
|
212
|
+
### 2.2 Browser Support
|
|
213
|
+
|
|
214
|
+
The component is tested and compatible with all modern evergreen browsers.
|
|
215
|
+
|
|
216
|
+
| Browser | Support Level |
|
|
217
|
+
| :--- | :--- |
|
|
218
|
+
| **Google Chrome** | Full (v80+) |
|
|
219
|
+
| **Mozilla Firefox** | Full (v75+) |
|
|
220
|
+
| **Apple Safari** | Full (v13+) |
|
|
221
|
+
| **Microsoft Edge** | Full (Chromium, v80+) |
|
|
222
|
+
| **Opera** | Full (v67+) |
|
|
223
|
+
| **Mobile Browsers** | iOS 13+, Android Chrome 80+ |
|
|
224
|
+
|
|
225
|
+
**Internet Explorer and legacy Edge are not supported.**
|
|
226
|
+
|
|
227
|
+
### 2.3 Platform Support
|
|
228
|
+
|
|
229
|
+
**rm-range-slider** is platform-agnostic. It works on any operating system that can run a supported web browser, including:
|
|
230
|
+
|
|
231
|
+
- Windows
|
|
232
|
+
- macOS
|
|
233
|
+
- Linux
|
|
234
|
+
- iOS
|
|
235
|
+
- Android
|
|
193
236
|
|
|
194
237
|
## Installation & Setup
|
|
195
238
|
|
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, numberAttribute, Output, Input, Component } from '@angular/core';
|
|
3
|
-
import * as i2 from '@angular/forms';
|
|
4
|
-
import { FormsModule } from '@angular/forms';
|
|
5
|
-
import * as i1 from '@angular/material/slider';
|
|
6
|
-
import { MatSliderModule } from '@angular/material/slider';
|
|
7
|
-
import { Subject, throttleTime, takeUntil } from 'rxjs';
|
|
8
|
-
|
|
9
|
-
class RmRangeSliderComponent {
|
|
10
|
-
constructor() {
|
|
11
|
-
this.destroy$ = new Subject();
|
|
12
|
-
/* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
|
|
13
|
-
`RmRangeSliderComponent` component in Angular. In this specific case: */
|
|
14
|
-
this.startValue = 0;
|
|
15
|
-
/* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
|
|
16
|
-
`RmRangeSliderComponent` component in Angular. In this specific case, the `endValue` property is
|
|
17
|
-
being defined as an input property with the following configuration: */
|
|
18
|
-
this.endValue = 10;
|
|
19
|
-
/* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
|
|
20
|
-
`RmRangeSliderComponent` component in Angular. In this specific case, the `min` property is being
|
|
21
|
-
defined as an input property with the following configuration: */
|
|
22
|
-
this.min = 0;
|
|
23
|
-
/* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
|
|
24
|
-
`RmRangeSliderComponent` component in Angular. In this specific case, the `max` property is being
|
|
25
|
-
defined as an input property with the following configuration: */
|
|
26
|
-
this.max = 100;
|
|
27
|
-
/* The `@Output()` decorator in the TypeScript code snippet is used to define an output property for
|
|
28
|
-
the `RmRangeSliderComponent` component in Angular. In this specific case, the `getMinMax` property
|
|
29
|
-
is being defined as an output property with the type of `EventEmitter<MINMAX>`. */
|
|
30
|
-
this.onValueChanged = new EventEmitter();
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and
|
|
34
|
-
* calls the `onSliderChange` function with this value.
|
|
35
|
-
*/
|
|
36
|
-
onSliderInput() {
|
|
37
|
-
const value = {
|
|
38
|
-
min: this.startValue,
|
|
39
|
-
max: this.endValue,
|
|
40
|
-
};
|
|
41
|
-
this.onSliderChange(value);
|
|
42
|
-
}
|
|
43
|
-
/**
|
|
44
|
-
* The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest
|
|
45
|
-
* hundredth and appending a 'k' if the value is greater than or equal to 1000.
|
|
46
|
-
* @param {number} value - The `value` parameter is a number that represents a numerical value which
|
|
47
|
-
* needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted
|
|
48
|
-
* string representation of the number. If the value is greater than or equal to 1000, it will be
|
|
49
|
-
* rounded and displayed in
|
|
50
|
-
* @returns If the `value` is greater than or equal to 1000, the function will return the value divided
|
|
51
|
-
* by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.
|
|
52
|
-
*/
|
|
53
|
-
formatLabel(value) {
|
|
54
|
-
if (value >= 1000) {
|
|
55
|
-
return Math.round(value / 100) + 'k';
|
|
56
|
-
}
|
|
57
|
-
return `${value}`;
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a
|
|
61
|
-
* throttle time of 5000 milliseconds.
|
|
62
|
-
* @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current
|
|
63
|
-
* value of the slider, which is of type `MINMAX`.
|
|
64
|
-
*/
|
|
65
|
-
onSliderChange(value) {
|
|
66
|
-
this.destroy$.next();
|
|
67
|
-
this.destroy$.complete();
|
|
68
|
-
const sliderValueChanges$ = new Subject();
|
|
69
|
-
sliderValueChanges$
|
|
70
|
-
.pipe(throttleTime(5000), takeUntil(this.destroy$))
|
|
71
|
-
.subscribe((newValue) => {
|
|
72
|
-
this.onValueChanged.emit(newValue);
|
|
73
|
-
});
|
|
74
|
-
sliderValueChanges$.next(value);
|
|
75
|
-
}
|
|
76
|
-
/**
|
|
77
|
-
* The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from
|
|
78
|
-
* observables by completing a subject.
|
|
79
|
-
*/
|
|
80
|
-
ngOnDestroy() {
|
|
81
|
-
this.destroy$.next();
|
|
82
|
-
this.destroy$.complete();
|
|
83
|
-
}
|
|
84
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RmRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { EventEmitter, numberAttribute, Output, Input, Component } from '@angular/core';
|
|
3
|
+
import * as i2 from '@angular/forms';
|
|
4
|
+
import { FormsModule } from '@angular/forms';
|
|
5
|
+
import * as i1 from '@angular/material/slider';
|
|
6
|
+
import { MatSliderModule } from '@angular/material/slider';
|
|
7
|
+
import { Subject, throttleTime, takeUntil } from 'rxjs';
|
|
8
|
+
|
|
9
|
+
class RmRangeSliderComponent {
|
|
10
|
+
constructor() {
|
|
11
|
+
this.destroy$ = new Subject();
|
|
12
|
+
/* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
|
|
13
|
+
`RmRangeSliderComponent` component in Angular. In this specific case: */
|
|
14
|
+
this.startValue = 0;
|
|
15
|
+
/* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
|
|
16
|
+
`RmRangeSliderComponent` component in Angular. In this specific case, the `endValue` property is
|
|
17
|
+
being defined as an input property with the following configuration: */
|
|
18
|
+
this.endValue = 10;
|
|
19
|
+
/* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
|
|
20
|
+
`RmRangeSliderComponent` component in Angular. In this specific case, the `min` property is being
|
|
21
|
+
defined as an input property with the following configuration: */
|
|
22
|
+
this.min = 0;
|
|
23
|
+
/* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the
|
|
24
|
+
`RmRangeSliderComponent` component in Angular. In this specific case, the `max` property is being
|
|
25
|
+
defined as an input property with the following configuration: */
|
|
26
|
+
this.max = 100;
|
|
27
|
+
/* The `@Output()` decorator in the TypeScript code snippet is used to define an output property for
|
|
28
|
+
the `RmRangeSliderComponent` component in Angular. In this specific case, the `getMinMax` property
|
|
29
|
+
is being defined as an output property with the type of `EventEmitter<MINMAX>`. */
|
|
30
|
+
this.onValueChanged = new EventEmitter();
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and
|
|
34
|
+
* calls the `onSliderChange` function with this value.
|
|
35
|
+
*/
|
|
36
|
+
onSliderInput() {
|
|
37
|
+
const value = {
|
|
38
|
+
min: this.startValue,
|
|
39
|
+
max: this.endValue,
|
|
40
|
+
};
|
|
41
|
+
this.onSliderChange(value);
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest
|
|
45
|
+
* hundredth and appending a 'k' if the value is greater than or equal to 1000.
|
|
46
|
+
* @param {number} value - The `value` parameter is a number that represents a numerical value which
|
|
47
|
+
* needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted
|
|
48
|
+
* string representation of the number. If the value is greater than or equal to 1000, it will be
|
|
49
|
+
* rounded and displayed in
|
|
50
|
+
* @returns If the `value` is greater than or equal to 1000, the function will return the value divided
|
|
51
|
+
* by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.
|
|
52
|
+
*/
|
|
53
|
+
formatLabel(value) {
|
|
54
|
+
if (value >= 1000) {
|
|
55
|
+
return Math.round(value / 100) + 'k';
|
|
56
|
+
}
|
|
57
|
+
return `${value}`;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a
|
|
61
|
+
* throttle time of 5000 milliseconds.
|
|
62
|
+
* @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current
|
|
63
|
+
* value of the slider, which is of type `MINMAX`.
|
|
64
|
+
*/
|
|
65
|
+
onSliderChange(value) {
|
|
66
|
+
this.destroy$.next();
|
|
67
|
+
this.destroy$.complete();
|
|
68
|
+
const sliderValueChanges$ = new Subject();
|
|
69
|
+
sliderValueChanges$
|
|
70
|
+
.pipe(throttleTime(5000), takeUntil(this.destroy$))
|
|
71
|
+
.subscribe((newValue) => {
|
|
72
|
+
this.onValueChanged.emit(newValue);
|
|
73
|
+
});
|
|
74
|
+
sliderValueChanges$.next(value);
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from
|
|
78
|
+
* observables by completing a subject.
|
|
79
|
+
*/
|
|
80
|
+
ngOnDestroy() {
|
|
81
|
+
this.destroy$.next();
|
|
82
|
+
this.destroy$.complete();
|
|
83
|
+
}
|
|
84
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RmRangeSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
85
85
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.6", 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"
|
|
@@ -94,10 +94,10 @@ class RmRangeSliderComponent {
|
|
|
94
94
|
<input matSliderStartThumb [(ngModel)]="startValue" />
|
|
95
95
|
<input matSliderEndThumb [(ngModel)]="endValue" />
|
|
96
96
|
</mat-slider>
|
|
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
|
-
}
|
|
99
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RmRangeSliderComponent, decorators: [{
|
|
100
|
-
type: Component,
|
|
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
|
+
}
|
|
99
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: RmRangeSliderComponent, decorators: [{
|
|
100
|
+
type: Component,
|
|
101
101
|
args: [{ selector: 'rm-range-slider', imports: [MatSliderModule, FormsModule], template: `
|
|
102
102
|
<mat-slider
|
|
103
103
|
[min]="this.min"
|
|
@@ -110,42 +110,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
110
110
|
<input matSliderStartThumb [(ngModel)]="startValue" />
|
|
111
111
|
<input matSliderEndThumb [(ngModel)]="endValue" />
|
|
112
112
|
</mat-slider>
|
|
113
|
-
`, styles: ["mat-slider{width:100%}\n"] }]
|
|
114
|
-
}], propDecorators: { startValue: [{
|
|
115
|
-
type: Input,
|
|
116
|
-
args: [{
|
|
117
|
-
required: true,
|
|
118
|
-
transform: numberAttribute,
|
|
119
|
-
}]
|
|
120
|
-
}], endValue: [{
|
|
121
|
-
type: Input,
|
|
122
|
-
args: [{
|
|
123
|
-
required: true,
|
|
124
|
-
transform: numberAttribute,
|
|
125
|
-
}]
|
|
126
|
-
}], min: [{
|
|
127
|
-
type: Input,
|
|
128
|
-
args: [{
|
|
129
|
-
required: true,
|
|
130
|
-
transform: numberAttribute,
|
|
131
|
-
}]
|
|
132
|
-
}], max: [{
|
|
133
|
-
type: Input,
|
|
134
|
-
args: [{
|
|
135
|
-
required: true,
|
|
136
|
-
transform: numberAttribute,
|
|
137
|
-
}]
|
|
138
|
-
}], onValueChanged: [{
|
|
139
|
-
type: Output
|
|
140
|
-
}] } });
|
|
141
|
-
|
|
142
|
-
/*
|
|
143
|
-
* Public API Surface of rm-range-slider
|
|
144
|
-
*/
|
|
145
|
-
|
|
146
|
-
/**
|
|
147
|
-
* Generated bundle index. Do not edit.
|
|
148
|
-
*/
|
|
149
|
-
|
|
150
|
-
export { RmRangeSliderComponent };
|
|
151
|
-
//# sourceMappingURL=rm-range-slider.mjs.map
|
|
113
|
+
`, styles: ["mat-slider{width:100%}\n"] }]
|
|
114
|
+
}], propDecorators: { startValue: [{
|
|
115
|
+
type: Input,
|
|
116
|
+
args: [{
|
|
117
|
+
required: true,
|
|
118
|
+
transform: numberAttribute,
|
|
119
|
+
}]
|
|
120
|
+
}], endValue: [{
|
|
121
|
+
type: Input,
|
|
122
|
+
args: [{
|
|
123
|
+
required: true,
|
|
124
|
+
transform: numberAttribute,
|
|
125
|
+
}]
|
|
126
|
+
}], min: [{
|
|
127
|
+
type: Input,
|
|
128
|
+
args: [{
|
|
129
|
+
required: true,
|
|
130
|
+
transform: numberAttribute,
|
|
131
|
+
}]
|
|
132
|
+
}], max: [{
|
|
133
|
+
type: Input,
|
|
134
|
+
args: [{
|
|
135
|
+
required: true,
|
|
136
|
+
transform: numberAttribute,
|
|
137
|
+
}]
|
|
138
|
+
}], onValueChanged: [{
|
|
139
|
+
type: Output
|
|
140
|
+
}] } });
|
|
141
|
+
|
|
142
|
+
/*
|
|
143
|
+
* Public API Surface of rm-range-slider
|
|
144
|
+
*/
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Generated bundle index. Do not edit.
|
|
148
|
+
*/
|
|
149
|
+
|
|
150
|
+
export { RmRangeSliderComponent };
|
|
151
|
+
//# sourceMappingURL=rm-range-slider.mjs.map
|
package/package.json
CHANGED
|
@@ -1,167 +1,167 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "rm-range-slider",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "A highly optimized and fully customizable pure angular component for value range selection.",
|
|
5
|
-
"keywords": [
|
|
6
|
-
"angular",
|
|
7
|
-
"angular-library",
|
|
8
|
-
"angular-component",
|
|
9
|
-
"angular-ui",
|
|
10
|
-
"angular-slider",
|
|
11
|
-
"angular-range-slider",
|
|
12
|
-
"angular-dual-range-slider",
|
|
13
|
-
"angular-single-range-slider",
|
|
14
|
-
"ng",
|
|
15
|
-
"ng-component",
|
|
16
|
-
"ng-library",
|
|
17
|
-
"typescript",
|
|
18
|
-
"frontend",
|
|
19
|
-
"ui",
|
|
20
|
-
"ux",
|
|
21
|
-
"ui-components",
|
|
22
|
-
"custom-ui",
|
|
23
|
-
"form-control",
|
|
24
|
-
"input",
|
|
25
|
-
"range",
|
|
26
|
-
"range-slider",
|
|
27
|
-
"slider",
|
|
28
|
-
"dual-range",
|
|
29
|
-
"dual-slider",
|
|
30
|
-
"single-slider",
|
|
31
|
-
"price-range-slider",
|
|
32
|
-
"min-max-slider",
|
|
33
|
-
"multi-thumb-slider",
|
|
34
|
-
"two-thumb-slider",
|
|
35
|
-
"thumb-slider",
|
|
36
|
-
"custom-slider",
|
|
37
|
-
"lightweight",
|
|
38
|
-
"performance",
|
|
39
|
-
"high-performance",
|
|
40
|
-
"secure",
|
|
41
|
-
"accessibility",
|
|
42
|
-
"a11y",
|
|
43
|
-
"responsive",
|
|
44
|
-
"mobile-friendly",
|
|
45
|
-
"desktop-friendly",
|
|
46
|
-
"touch-slider",
|
|
47
|
-
"drag-slider",
|
|
48
|
-
"mouse-slider",
|
|
49
|
-
"keyboard-support",
|
|
50
|
-
"theming",
|
|
51
|
-
"styling",
|
|
52
|
-
"css",
|
|
53
|
-
"scss",
|
|
54
|
-
"customizable",
|
|
55
|
-
"no-dependency",
|
|
56
|
-
"zero-dependency",
|
|
57
|
-
"tree-shakable",
|
|
58
|
-
"modern-angular",
|
|
59
|
-
"angular-standalone",
|
|
60
|
-
"angular-forms",
|
|
61
|
-
"reactive-forms",
|
|
62
|
-
"template-driven-forms",
|
|
63
|
-
"open-source",
|
|
64
|
-
"npm",
|
|
65
|
-
"frontend-library",
|
|
66
|
-
"ui-library",
|
|
67
|
-
"web-component-alternative",
|
|
68
|
-
"range-input",
|
|
69
|
-
"html-range",
|
|
70
|
-
"custom-range-input",
|
|
71
|
-
"angular14",
|
|
72
|
-
"angular15",
|
|
73
|
-
"angular16",
|
|
74
|
-
"angular17",
|
|
75
|
-
"angular18",
|
|
76
|
-
"angular19",
|
|
77
|
-
"angular20",
|
|
78
|
-
"angular21",
|
|
79
|
-
"angular22",
|
|
80
|
-
"angular23",
|
|
81
|
-
"angular24"
|
|
82
|
-
],
|
|
83
|
-
"author": {
|
|
84
|
-
"name": "Rajat Malik",
|
|
85
|
-
"email": "mr.rajatmalik@gmail.com",
|
|
86
|
-
"url": "https://www.rajatmalik.dev/"
|
|
87
|
-
},
|
|
88
|
-
"contributors": [
|
|
89
|
-
{
|
|
90
|
-
"name": "Rajat Malik",
|
|
91
|
-
"email": "mr.rajatmalik@gmail.com"
|
|
92
|
-
}
|
|
93
|
-
],
|
|
94
|
-
"maintainers": [
|
|
95
|
-
{
|
|
96
|
-
"name": "Rajat Malik",
|
|
97
|
-
"email": "mr.rajatmalik@gmail.com"
|
|
98
|
-
}
|
|
99
|
-
],
|
|
100
|
-
"homepage": "https://github.com/malikrajat/rm-range-slider#readme",
|
|
101
|
-
"repository": {
|
|
102
|
-
"type": "git",
|
|
103
|
-
"url": "git+https://github.com/malikrajat/rm-range-slider.git"
|
|
104
|
-
},
|
|
105
|
-
"bugs": {
|
|
106
|
-
"url": "https://github.com/malikrajat/rm-range-slider/issues",
|
|
107
|
-
"email": "mr.rajatmalik@gmail.com"
|
|
108
|
-
},
|
|
109
|
-
"peerDependencies": {
|
|
110
|
-
"@angular/common": ">=14.0.0 <24.0.0",
|
|
111
|
-
"@angular/core": ">=14.0.0 <24.0.0",
|
|
112
|
-
"@angular/material": ">=14.0.0 <24.0.0"
|
|
113
|
-
},
|
|
114
|
-
"dependencies": {
|
|
115
|
-
"tslib": "^2.6.0"
|
|
116
|
-
},
|
|
117
|
-
"publishConfig": {
|
|
118
|
-
"access": "public",
|
|
119
|
-
"registry": "https://registry.npmjs.org/"
|
|
120
|
-
},
|
|
121
|
-
"funding": {
|
|
122
|
-
"type": "individual",
|
|
123
|
-
"url": "https://github.com/sponsors/malikrajat"
|
|
124
|
-
},
|
|
125
|
-
"engines": {
|
|
126
|
-
"node": ">=16.0.0",
|
|
127
|
-
"npm": ">=8.0.0"
|
|
128
|
-
},
|
|
129
|
-
"os": [
|
|
130
|
-
"darwin",
|
|
131
|
-
"linux",
|
|
132
|
-
"win32"
|
|
133
|
-
],
|
|
134
|
-
"cpu": [
|
|
135
|
-
"x64",
|
|
136
|
-
"arm64"
|
|
137
|
-
],
|
|
138
|
-
"ng-add": {
|
|
139
|
-
"save": "dependencies"
|
|
140
|
-
},
|
|
141
|
-
"ng-update": {
|
|
142
|
-
"packageGroup": [
|
|
143
|
-
"rm-range-slider"
|
|
144
|
-
]
|
|
145
|
-
},
|
|
146
|
-
"directories": {
|
|
147
|
-
"lib": "./src",
|
|
148
|
-
"doc": "./docs"
|
|
149
|
-
},
|
|
150
|
-
"packageManager": "pnpm@10.11.1",
|
|
151
|
-
"license": "MIT",
|
|
152
|
-
"type": "module",
|
|
153
|
-
"sideEffects": false,
|
|
154
|
-
"private": false,
|
|
155
|
-
"readme": "README.md",
|
|
156
|
-
"module": "fesm2022/rm-range-slider.mjs",
|
|
157
|
-
"typings": "types/rm-range-slider.d.ts",
|
|
158
|
-
"exports": {
|
|
159
|
-
"./package.json": {
|
|
160
|
-
"default": "./package.json"
|
|
161
|
-
},
|
|
162
|
-
".": {
|
|
163
|
-
"types": "./types/rm-range-slider.d.ts",
|
|
164
|
-
"default": "./fesm2022/rm-range-slider.mjs"
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "rm-range-slider",
|
|
3
|
+
"version": "8.0.0",
|
|
4
|
+
"description": "A highly optimized and fully customizable pure angular component for value range selection.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"angular",
|
|
7
|
+
"angular-library",
|
|
8
|
+
"angular-component",
|
|
9
|
+
"angular-ui",
|
|
10
|
+
"angular-slider",
|
|
11
|
+
"angular-range-slider",
|
|
12
|
+
"angular-dual-range-slider",
|
|
13
|
+
"angular-single-range-slider",
|
|
14
|
+
"ng",
|
|
15
|
+
"ng-component",
|
|
16
|
+
"ng-library",
|
|
17
|
+
"typescript",
|
|
18
|
+
"frontend",
|
|
19
|
+
"ui",
|
|
20
|
+
"ux",
|
|
21
|
+
"ui-components",
|
|
22
|
+
"custom-ui",
|
|
23
|
+
"form-control",
|
|
24
|
+
"input",
|
|
25
|
+
"range",
|
|
26
|
+
"range-slider",
|
|
27
|
+
"slider",
|
|
28
|
+
"dual-range",
|
|
29
|
+
"dual-slider",
|
|
30
|
+
"single-slider",
|
|
31
|
+
"price-range-slider",
|
|
32
|
+
"min-max-slider",
|
|
33
|
+
"multi-thumb-slider",
|
|
34
|
+
"two-thumb-slider",
|
|
35
|
+
"thumb-slider",
|
|
36
|
+
"custom-slider",
|
|
37
|
+
"lightweight",
|
|
38
|
+
"performance",
|
|
39
|
+
"high-performance",
|
|
40
|
+
"secure",
|
|
41
|
+
"accessibility",
|
|
42
|
+
"a11y",
|
|
43
|
+
"responsive",
|
|
44
|
+
"mobile-friendly",
|
|
45
|
+
"desktop-friendly",
|
|
46
|
+
"touch-slider",
|
|
47
|
+
"drag-slider",
|
|
48
|
+
"mouse-slider",
|
|
49
|
+
"keyboard-support",
|
|
50
|
+
"theming",
|
|
51
|
+
"styling",
|
|
52
|
+
"css",
|
|
53
|
+
"scss",
|
|
54
|
+
"customizable",
|
|
55
|
+
"no-dependency",
|
|
56
|
+
"zero-dependency",
|
|
57
|
+
"tree-shakable",
|
|
58
|
+
"modern-angular",
|
|
59
|
+
"angular-standalone",
|
|
60
|
+
"angular-forms",
|
|
61
|
+
"reactive-forms",
|
|
62
|
+
"template-driven-forms",
|
|
63
|
+
"open-source",
|
|
64
|
+
"npm",
|
|
65
|
+
"frontend-library",
|
|
66
|
+
"ui-library",
|
|
67
|
+
"web-component-alternative",
|
|
68
|
+
"range-input",
|
|
69
|
+
"html-range",
|
|
70
|
+
"custom-range-input",
|
|
71
|
+
"angular14",
|
|
72
|
+
"angular15",
|
|
73
|
+
"angular16",
|
|
74
|
+
"angular17",
|
|
75
|
+
"angular18",
|
|
76
|
+
"angular19",
|
|
77
|
+
"angular20",
|
|
78
|
+
"angular21",
|
|
79
|
+
"angular22",
|
|
80
|
+
"angular23",
|
|
81
|
+
"angular24"
|
|
82
|
+
],
|
|
83
|
+
"author": {
|
|
84
|
+
"name": "Rajat Malik",
|
|
85
|
+
"email": "mr.rajatmalik@gmail.com",
|
|
86
|
+
"url": "https://www.rajatmalik.dev/"
|
|
87
|
+
},
|
|
88
|
+
"contributors": [
|
|
89
|
+
{
|
|
90
|
+
"name": "Rajat Malik",
|
|
91
|
+
"email": "mr.rajatmalik@gmail.com"
|
|
92
|
+
}
|
|
93
|
+
],
|
|
94
|
+
"maintainers": [
|
|
95
|
+
{
|
|
96
|
+
"name": "Rajat Malik",
|
|
97
|
+
"email": "mr.rajatmalik@gmail.com"
|
|
98
|
+
}
|
|
99
|
+
],
|
|
100
|
+
"homepage": "https://github.com/malikrajat/rm-range-slider#readme",
|
|
101
|
+
"repository": {
|
|
102
|
+
"type": "git",
|
|
103
|
+
"url": "git+https://github.com/malikrajat/rm-range-slider.git"
|
|
104
|
+
},
|
|
105
|
+
"bugs": {
|
|
106
|
+
"url": "https://github.com/malikrajat/rm-range-slider/issues",
|
|
107
|
+
"email": "mr.rajatmalik@gmail.com"
|
|
108
|
+
},
|
|
109
|
+
"peerDependencies": {
|
|
110
|
+
"@angular/common": ">=14.0.0 <24.0.0",
|
|
111
|
+
"@angular/core": ">=14.0.0 <24.0.0",
|
|
112
|
+
"@angular/material": ">=14.0.0 <24.0.0"
|
|
113
|
+
},
|
|
114
|
+
"dependencies": {
|
|
115
|
+
"tslib": "^2.6.0"
|
|
116
|
+
},
|
|
117
|
+
"publishConfig": {
|
|
118
|
+
"access": "public",
|
|
119
|
+
"registry": "https://registry.npmjs.org/"
|
|
120
|
+
},
|
|
121
|
+
"funding": {
|
|
122
|
+
"type": "individual",
|
|
123
|
+
"url": "https://github.com/sponsors/malikrajat"
|
|
124
|
+
},
|
|
125
|
+
"engines": {
|
|
126
|
+
"node": ">=16.0.0",
|
|
127
|
+
"npm": ">=8.0.0"
|
|
128
|
+
},
|
|
129
|
+
"os": [
|
|
130
|
+
"darwin",
|
|
131
|
+
"linux",
|
|
132
|
+
"win32"
|
|
133
|
+
],
|
|
134
|
+
"cpu": [
|
|
135
|
+
"x64",
|
|
136
|
+
"arm64"
|
|
137
|
+
],
|
|
138
|
+
"ng-add": {
|
|
139
|
+
"save": "dependencies"
|
|
140
|
+
},
|
|
141
|
+
"ng-update": {
|
|
142
|
+
"packageGroup": [
|
|
143
|
+
"rm-range-slider"
|
|
144
|
+
]
|
|
145
|
+
},
|
|
146
|
+
"directories": {
|
|
147
|
+
"lib": "./src",
|
|
148
|
+
"doc": "./docs"
|
|
149
|
+
},
|
|
150
|
+
"packageManager": "pnpm@10.11.1",
|
|
151
|
+
"license": "MIT",
|
|
152
|
+
"type": "module",
|
|
153
|
+
"sideEffects": false,
|
|
154
|
+
"private": false,
|
|
155
|
+
"readme": "README.md",
|
|
156
|
+
"module": "fesm2022/rm-range-slider.mjs",
|
|
157
|
+
"typings": "types/rm-range-slider.d.ts",
|
|
158
|
+
"exports": {
|
|
159
|
+
"./package.json": {
|
|
160
|
+
"default": "./package.json"
|
|
161
|
+
},
|
|
162
|
+
".": {
|
|
163
|
+
"types": "./types/rm-range-slider.d.ts",
|
|
164
|
+
"default": "./fesm2022/rm-range-slider.mjs"
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { OnDestroy, EventEmitter } from '@angular/core';
|
|
3
|
-
|
|
4
|
-
interface MINMAX {
|
|
5
|
-
min: number;
|
|
6
|
-
max: number;
|
|
7
|
-
}
|
|
8
|
-
declare class RmRangeSliderComponent implements OnDestroy {
|
|
9
|
-
private destroy$;
|
|
10
|
-
startValue: number;
|
|
11
|
-
endValue: number;
|
|
12
|
-
min: number;
|
|
13
|
-
max: number;
|
|
14
|
-
onValueChanged: EventEmitter<MINMAX>;
|
|
15
|
-
/**
|
|
16
|
-
* The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and
|
|
17
|
-
* calls the `onSliderChange` function with this value.
|
|
18
|
-
*/
|
|
19
|
-
onSliderInput(): void;
|
|
20
|
-
/**
|
|
21
|
-
* The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest
|
|
22
|
-
* hundredth and appending a 'k' if the value is greater than or equal to 1000.
|
|
23
|
-
* @param {number} value - The `value` parameter is a number that represents a numerical value which
|
|
24
|
-
* needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted
|
|
25
|
-
* string representation of the number. If the value is greater than or equal to 1000, it will be
|
|
26
|
-
* rounded and displayed in
|
|
27
|
-
* @returns If the `value` is greater than or equal to 1000, the function will return the value divided
|
|
28
|
-
* by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.
|
|
29
|
-
*/
|
|
30
|
-
formatLabel(value: number): string;
|
|
31
|
-
/**
|
|
32
|
-
* The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a
|
|
33
|
-
* throttle time of 5000 milliseconds.
|
|
34
|
-
* @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current
|
|
35
|
-
* value of the slider, which is of type `MINMAX`.
|
|
36
|
-
*/
|
|
37
|
-
onSliderChange(value: MINMAX): void;
|
|
38
|
-
/**
|
|
39
|
-
* The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from
|
|
40
|
-
* observables by completing a subject.
|
|
41
|
-
*/
|
|
42
|
-
ngOnDestroy(): void;
|
|
43
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<RmRangeSliderComponent, never>;
|
|
44
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<RmRangeSliderComponent, "rm-range-slider", never, { "startValue": { "alias": "startValue"; "required": true; }; "endValue": { "alias": "endValue"; "required": true; }; "min": { "alias": "min"; "required": true; }; "max": { "alias": "max"; "required": true; }; }, { "onValueChanged": "onValueChanged"; }, never, never, true, never>;
|
|
45
|
-
static ngAcceptInputType_startValue: unknown;
|
|
46
|
-
static ngAcceptInputType_endValue: unknown;
|
|
47
|
-
static ngAcceptInputType_min: unknown;
|
|
48
|
-
static ngAcceptInputType_max: unknown;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
export { RmRangeSliderComponent };
|
|
52
|
-
export type { MINMAX };
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { OnDestroy, EventEmitter } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
interface MINMAX {
|
|
5
|
+
min: number;
|
|
6
|
+
max: number;
|
|
7
|
+
}
|
|
8
|
+
declare class RmRangeSliderComponent implements OnDestroy {
|
|
9
|
+
private destroy$;
|
|
10
|
+
startValue: number;
|
|
11
|
+
endValue: number;
|
|
12
|
+
min: number;
|
|
13
|
+
max: number;
|
|
14
|
+
onValueChanged: EventEmitter<MINMAX>;
|
|
15
|
+
/**
|
|
16
|
+
* The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and
|
|
17
|
+
* calls the `onSliderChange` function with this value.
|
|
18
|
+
*/
|
|
19
|
+
onSliderInput(): void;
|
|
20
|
+
/**
|
|
21
|
+
* The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest
|
|
22
|
+
* hundredth and appending a 'k' if the value is greater than or equal to 1000.
|
|
23
|
+
* @param {number} value - The `value` parameter is a number that represents a numerical value which
|
|
24
|
+
* needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted
|
|
25
|
+
* string representation of the number. If the value is greater than or equal to 1000, it will be
|
|
26
|
+
* rounded and displayed in
|
|
27
|
+
* @returns If the `value` is greater than or equal to 1000, the function will return the value divided
|
|
28
|
+
* by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.
|
|
29
|
+
*/
|
|
30
|
+
formatLabel(value: number): string;
|
|
31
|
+
/**
|
|
32
|
+
* The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a
|
|
33
|
+
* throttle time of 5000 milliseconds.
|
|
34
|
+
* @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current
|
|
35
|
+
* value of the slider, which is of type `MINMAX`.
|
|
36
|
+
*/
|
|
37
|
+
onSliderChange(value: MINMAX): void;
|
|
38
|
+
/**
|
|
39
|
+
* The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from
|
|
40
|
+
* observables by completing a subject.
|
|
41
|
+
*/
|
|
42
|
+
ngOnDestroy(): void;
|
|
43
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RmRangeSliderComponent, never>;
|
|
44
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RmRangeSliderComponent, "rm-range-slider", never, { "startValue": { "alias": "startValue"; "required": true; }; "endValue": { "alias": "endValue"; "required": true; }; "min": { "alias": "min"; "required": true; }; "max": { "alias": "max"; "required": true; }; }, { "onValueChanged": "onValueChanged"; }, never, never, true, never>;
|
|
45
|
+
static ngAcceptInputType_startValue: unknown;
|
|
46
|
+
static ngAcceptInputType_endValue: unknown;
|
|
47
|
+
static ngAcceptInputType_min: unknown;
|
|
48
|
+
static ngAcceptInputType_max: unknown;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export { RmRangeSliderComponent };
|
|
52
|
+
export type { MINMAX };
|