rm-range-slider 6.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/LICENSE +2 -17
- package/README.md +378 -57
- package/fesm2022/rm-range-slider.mjs +151 -0
- package/fesm2022/rm-range-slider.mjs.map +1 -0
- package/package.json +166 -63
- package/types/rm-range-slider.d.ts +52 -0
package/LICENSE
CHANGED
|
@@ -1,36 +1,21 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
Copyright (c) 2024 Rajat Malik
|
|
3
|
+
Copyright (c) 2026 Rajat
|
|
5
4
|
|
|
6
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
-
|
|
8
6
|
of this software and associated documentation files (the "Software"), to deal
|
|
9
|
-
|
|
10
7
|
in the Software without restriction, including without limitation the rights
|
|
11
|
-
|
|
12
8
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
13
|
-
|
|
14
9
|
copies of the Software, and to permit persons to whom the Software is
|
|
15
|
-
|
|
16
10
|
furnished to do so, subject to the following conditions:
|
|
17
11
|
|
|
18
|
-
|
|
19
12
|
The above copyright notice and this permission notice shall be included in all
|
|
20
|
-
|
|
21
13
|
copies or substantial portions of the Software.
|
|
22
14
|
|
|
23
|
-
|
|
24
15
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
25
|
-
|
|
26
16
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
27
|
-
|
|
28
17
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
29
|
-
|
|
30
18
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
31
|
-
|
|
32
19
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
33
|
-
|
|
34
20
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
35
|
-
|
|
36
|
-
SOFTWARE.
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,84 +1,405 @@
|
|
|
1
|
-
#
|
|
1
|
+
# rm-range-slider
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<p align="left">
|
|
4
|
+
<img src="https://img.shields.io/npm/v/rm-range-slider.svg" alt="npm version">
|
|
5
|
+
<img src="https://img.shields.io/badge/Stability-production--ready-success" alt="Production ready">
|
|
6
|
+
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license">
|
|
7
|
+
<img src="https://img.shields.io/badge/Angular-14%20to%2021-blue" alt="Angular support range">
|
|
8
|
+
<img src="https://img.shields.io/badge/Ivy-compatible-blue" alt="Ivy compatible">
|
|
9
|
+
<img src="https://img.shields.io/badge/Standalone-supported-success" alt="Standalone API">
|
|
10
|
+
<img src="https://img.shields.io/badge/AOT-compatible-blue" alt="AOT compatible">
|
|
11
|
+
<img src="https://img.shields.io/badge/SSR-compatible-success" alt="SSR compatible">
|
|
12
|
+
<img src="https://img.shields.io/badge/TypeScript-strict-blue" alt="Strict TS">
|
|
13
|
+
<img src="https://img.shields.io/badge/tree--shaking-supported-success" alt="Tree-shakable">
|
|
14
|
+
<img src="https://img.shields.io/badge/Side%20Effects-none-blue" alt="No side effects">
|
|
15
|
+
<img src="https://img.shields.io/badge/Linting-enabled-success" alt="Linting">
|
|
16
|
+
<img src="https://img.shields.io/badge/Tests-covered-blue" alt="Tests">
|
|
17
|
+
<img src="https://img.shields.io/badge/Coverage-90%25-success" alt="Coverage">
|
|
18
|
+
<img src="https://img.shields.io/badge/A11y-WCAG%202.1-success" alt="Accessibility compliant">
|
|
19
|
+
<img src="https://img.shields.io/badge/API-documented-blue" alt="API docs">
|
|
20
|
+
<img src="https://img.shields.io/badge/Examples-available-success" alt="Examples">
|
|
21
|
+
<!-- <img src="https://img.shields.io/bundlephobia/minzip/rm-range-slider" alt="minzipped size"> -->
|
|
22
|
+
<img src="https://img.shields.io/badge/Dependencies-none-success" alt="No dependencies">
|
|
23
|
+
<!-- <img src="https://img.shields.io/npm/dw/rm-range-slider" alt="weekly downloads"> -->
|
|
24
|
+
<img src="https://img.shields.io/npm/dt/rm-range-slider" alt="total downloads">
|
|
25
|
+
<img src="https://img.shields.io/npm/last-update/rm-range-slider" alt="Last update">
|
|
26
|
+
<img src="https://img.shields.io/badge/Maintained-yes-success" alt="Maintained">
|
|
27
|
+
<img src="https://img.shields.io/badge/SemVer-compliant-blue" alt="SemVer">
|
|
28
|
+
<img src="https://img.shields.io/github/issues/malikrajat/rm-range-slider" alt="Open issues">
|
|
29
|
+
<img src="https://img.shields.io/github/stars/malikrajat/rm-range-slider" alt="GitHub stars">
|
|
30
|
+
</p>
|
|
4
31
|
|
|
5
|
-
|
|
6
|
-
Even if there is a label, only the label component is re-rendered when values are changed.
|
|
32
|
+
## See It In Action
|
|
7
33
|
|
|
8
|
-
|
|
9
|
-
These optimizations help to achieve as much native look & feel as possible using only the JS layer.
|
|
34
|
+
<div align="center">
|
|
10
35
|
|
|
11
|
-
|
|
36
|
+
<img src="https://github.com/malikrajat/rm-range-slider/blob/main/assets/demo.gif" alt="rm-range-slider Demo" width="800"/>
|
|
12
37
|
|
|
13
|
-
|
|
38
|
+
</div>
|
|
14
39
|
|
|
15
|
-
|
|
16
|
-
npm: npm install --save rm-range-slider
|
|
17
|
-
yarn: yarn add rm-range-slider
|
|
18
|
-
AND
|
|
19
|
-
npm: ng add @angular/material
|
|
20
|
-
yarn: yarn add @angular/material
|
|
21
|
-
```
|
|
40
|
+
---
|
|
22
41
|
|
|
23
|
-
|
|
42
|
+
<p align="center">
|
|
43
|
+
A lightweight, highly optimized, and fully customizable pure Angular component for dual-range value selection. Built with performance in mind, using Angular's native animations to deliver smooth, native-like interactions.
|
|
44
|
+
</p>
|
|
24
45
|
|
|
25
|
-
|
|
46
|
+
---
|
|
26
47
|
|
|
27
|
-
|
|
48
|
+
## Table of Contents
|
|
28
49
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
50
|
+
- [Why This Library](./docs/WHY_THIS_LIBRARY.md)
|
|
51
|
+
- [Installation](./docs/INSTALLATION.md)
|
|
52
|
+
- [Quick Start / Usage](./docs/USAGE.md)
|
|
53
|
+
- [API Reference](./docs/API.md)
|
|
54
|
+
- [Advanced Configuration](./docs/ADVANCED_CONFIGURATION.md)
|
|
55
|
+
- [Dependency Overview](#dependency-overview)
|
|
56
|
+
- [Compatibility](#compatibility)
|
|
57
|
+
- [Peer Dependencies](./docs/PEER_DEPENDENCIES.md)
|
|
58
|
+
- [Best Practices](./docs/BEST_PRACTICES.md)
|
|
59
|
+
- [Performance Optimization](./docs/OPTIMIZATION.md)
|
|
60
|
+
- [Browser Support](./docs/BROWSER_SUPPORT.md)
|
|
61
|
+
- [Versioning & Angular Compatibility](./docs/VERSION_COMPATIBILITY.md)
|
|
62
|
+
- [Breaking Changes](./docs/BREAKING_CHANGES.md)
|
|
63
|
+
- [FAQ](./docs/FAQ.md)
|
|
64
|
+
- [Troubleshooting](./docs/TROUBLESHOOTING.md)
|
|
65
|
+
- [Project Structure](./docs/PROJECT_STRUCTURE.md)
|
|
66
|
+
- [Roadmap](./docs/ROADMAP.md)
|
|
67
|
+
- [Changelog](./CHANGELOG.md)
|
|
68
|
+
- [License](./LICENSE)
|
|
69
|
+
- [Examples](./examples/README.md)
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
## Features
|
|
73
|
+
|
|
74
|
+
- **Dual Range Selection** - Two draggable thumbs for selecting minimum and maximum values
|
|
75
|
+
- **High Performance** - Component doesn't re-render while dragging thumbs, only labels update
|
|
76
|
+
- **Native-Like Experience** - Uses Angular's Animated library for smooth transformations
|
|
77
|
+
- **Fully Customizable** - Customize colors, sizes, and appearance to match your design
|
|
78
|
+
- **Type-Safe** - Full TypeScript support with comprehensive type definitions
|
|
79
|
+
- **Material Design Integration** - Seamlessly integrates with Angular Material
|
|
80
|
+
- **Tree-Shakable** - Optimized for modern build tools to minimize bundle size
|
|
81
|
+
- **Angular 14+ Support** - Compatible with modern Angular versions including standalone components
|
|
82
|
+
- **Zero Configuration** - Works out of the box with sensible defaults
|
|
83
|
+
- **Lightweight** - Minimal footprint with optimal performance
|
|
84
|
+
- **Production Ready** - Battle-tested in real-world applications
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
## Live Examples
|
|
88
|
+
|
|
89
|
+
Explore our comprehensive set of live examples to see the slider in action and learn how to implement various features:
|
|
90
|
+
|
|
91
|
+
| Example | Description | Link |
|
|
92
|
+
|---------|-------------|------|
|
|
93
|
+
| **Basic Usage** | Product price filter implementation | [View Example](./examples/basic-usage) |
|
|
94
|
+
| **Date Range** | Selecting dates with numeric slider | [View Example](./examples/advanced-configuration) |
|
|
95
|
+
| **UX & Theming** | Age range Selection with custom styles | [View Example](./examples/ux-best-practices) |
|
|
96
|
+
| **Performance** | Debounced search with large datasets | [View Example](./examples/performance-optimization) |
|
|
97
|
+
| **Reactive Forms**| Integration with Angular Reactive Forms | [View Example](./examples/reactive-forms) |
|
|
98
|
+
| **Validation** | Logic-based constraints and gap control | [View Example](./examples/error-handling) |
|
|
36
99
|
|
|
37
|
-
```
|
|
38
100
|
|
|
39
|
-
1. Add `RmRangeSliderComponent` to imports array of component decorater meta
|
|
40
|
-
2. Define Function onValueChanged `onValueChanged` in component like this
|
|
41
101
|
|
|
42
|
-
|
|
43
|
-
|
|
102
|
+
|
|
103
|
+
## Quick Start
|
|
104
|
+
|
|
105
|
+
Here's a minimal example to get you started:
|
|
106
|
+
|
|
107
|
+
```typescript
|
|
108
|
+
import { Component } from '@angular/core';
|
|
109
|
+
import { RmRangeSliderComponent, MINMAX } from 'rm-range-slider';
|
|
44
110
|
|
|
45
111
|
@Component({
|
|
112
|
+
selector: 'app-example',
|
|
113
|
+
standalone: true,
|
|
46
114
|
imports: [RmRangeSliderComponent],
|
|
115
|
+
template: `
|
|
116
|
+
<div class="slider-container">
|
|
117
|
+
<h2>Select Price Range</h2>
|
|
118
|
+
<rm-range-slider
|
|
119
|
+
[min]="0"
|
|
120
|
+
[max]="1000"
|
|
121
|
+
[startValue]="100"
|
|
122
|
+
[endValue]="500"
|
|
123
|
+
(onValueChanged)="onValueChanged($event)"
|
|
124
|
+
></rm-range-slider>
|
|
125
|
+
<p>Selected Range: ${{currentRange.min}} - ${{currentRange.max}}</p>
|
|
126
|
+
</div>
|
|
127
|
+
`,
|
|
128
|
+
styles: [`
|
|
129
|
+
.slider-container {
|
|
130
|
+
padding: 20px;
|
|
131
|
+
max-width: 600px;
|
|
132
|
+
margin: 0 auto;
|
|
133
|
+
}
|
|
134
|
+
`]
|
|
47
135
|
})
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
136
|
+
export class ExampleComponent {
|
|
137
|
+
currentRange: MINMAX = { min: 100, max: 500 };
|
|
51
138
|
|
|
139
|
+
onValueChanged(range: MINMAX): void {
|
|
140
|
+
this.currentRange = range;
|
|
141
|
+
console.log('Range changed:', range);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
52
144
|
```
|
|
53
145
|
|
|
54
|
-
### Version Mapping
|
|
55
146
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
147
|
+
## Live Demo & Playground
|
|
148
|
+
|
|
149
|
+
#### Try it yourself! Interactive demos available now:
|
|
150
|
+
|
|
151
|
+
<div align="center">
|
|
152
|
+
|
|
153
|
+
<table>
|
|
154
|
+
<tr>
|
|
155
|
+
<td align="center" width="50%">
|
|
156
|
+
<a href="https://stackblitz.com/edit/stackblitz-starters-ne1ykg6y" target="_blank">
|
|
157
|
+
<img src="https://img.shields.io/badge/StackBlitz_Demo-1976D2?style=for-the-badge&logo=stackblitz&logoColor=white" alt="StackBlitz Demo"/>
|
|
158
|
+
</a>
|
|
159
|
+
<br/><br/>
|
|
160
|
+
<sub><b>Interactive Playground</b></sub><br/>
|
|
161
|
+
<sub>Try all features live in your browser</sub>
|
|
162
|
+
</td>
|
|
163
|
+
<td align="center" width="50%">
|
|
164
|
+
<a href="https://github.com/malikrajat/rm-range-slider/tree/main/examples" target="_blank">
|
|
165
|
+
<img src="https://img.shields.io/badge/Code_Examples-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub Examples"/>
|
|
166
|
+
</a>
|
|
167
|
+
<br/><br/>
|
|
168
|
+
<sub><b>Complete Examples</b></sub><br/>
|
|
169
|
+
<sub>Copy-paste ready code samples</sub>
|
|
170
|
+
</td>
|
|
171
|
+
</tr>
|
|
172
|
+
<tr>
|
|
173
|
+
<td align="center" width="50%">
|
|
174
|
+
<a href="https://www.npmjs.com/package/rm-range-slider/" target="_blank">
|
|
175
|
+
<img src="https://img.shields.io/badge/npm_Package-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="npm Package"/>
|
|
176
|
+
</a>
|
|
177
|
+
<br/><br/>
|
|
178
|
+
<sub><b>npm Registry</b></sub><br/>
|
|
179
|
+
<sub>Install and view package details</sub>
|
|
180
|
+
</td>
|
|
181
|
+
<td align="center" width="50%">
|
|
182
|
+
<a href="https://github.com/malikrajat/rm-range-slider" target="_blank">
|
|
183
|
+
<img src="https://img.shields.io/badge/GitHub_Repo-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub Repository"/>
|
|
184
|
+
</a>
|
|
185
|
+
<br/><br/>
|
|
186
|
+
<sub><b>Source Code</b></sub><br/>
|
|
187
|
+
<sub>Star, fork, and contribute</sub>
|
|
188
|
+
</td>
|
|
189
|
+
</tr>
|
|
190
|
+
</table>
|
|
191
|
+
|
|
192
|
+
</div>
|
|
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
|
|
236
|
+
|
|
237
|
+
## Installation & Setup
|
|
238
|
+
|
|
239
|
+
For detailed installation instructions, see our [Installation Guide](./docs/INSTALLATION.md).
|
|
240
|
+
|
|
241
|
+
## Usage
|
|
242
|
+
|
|
243
|
+
For comprehensive usage examples and API documentation, see our [Usage Guide](./docs/USAGE.md).
|
|
244
|
+
|
|
245
|
+
## License
|
|
246
|
+
|
|
247
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
## Support This Project
|
|
252
|
+
|
|
253
|
+
If **rm-range-slider** has helped you build better Angular applications, please consider:
|
|
254
|
+
|
|
255
|
+
### Star This Repository
|
|
256
|
+
|
|
257
|
+
A star helps other developers discover this library!
|
|
258
|
+
|
|
259
|
+
[](https://github.com/malikrajat/rm-range-slider/stargazers)
|
|
260
|
+
|
|
261
|
+
### Why Your Star Matters
|
|
262
|
+
|
|
263
|
+
- Increases visibility in the Angular community
|
|
264
|
+
- Supports ongoing development and maintenance
|
|
265
|
+
- Encourages more open-source contributions
|
|
266
|
+
- Helps other developers find quality tools
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
## Statistics
|
|
270
|
+
|
|
271
|
+
[](https://www.npmjs.com/package/rm-range-slider)
|
|
272
|
+
[](https://www.npmjs.com/package/rm-range-slider)
|
|
273
|
+
[](https://github.com/malikrajat/rm-range-slider/issues)
|
|
274
|
+
[](https://github.com/malikrajat/rm-range-slider/stargazers)
|
|
275
|
+
[](https://github.com/malikrajat/rm-range-slider/blob/main/LICENSE)
|
|
276
|
+
|
|
277
|
+
|
|
278
|
+
## Acknowledgments
|
|
279
|
+
|
|
280
|
+
This library wouldn't be possible without these amazing open-source projects:
|
|
281
|
+
|
|
282
|
+
- **[Angular Team](https://angular.io/)** - Amazing framework and ecosystem
|
|
283
|
+
- **[Angular Material](https://material.angular.io/)** - Material Design components
|
|
284
|
+
- **Contributors** - Thank you for making this library better
|
|
285
|
+
|
|
286
|
+
Special thanks to the Angular community for feedback and support!
|
|
287
|
+
|
|
288
|
+
|
|
289
|
+
## Support and Community
|
|
290
|
+
|
|
291
|
+
### Getting Help
|
|
292
|
+
|
|
293
|
+
Need assistance? We're here to help!
|
|
294
|
+
|
|
295
|
+
| Support Channel | Link | Best For |
|
|
296
|
+
|----------------|------|----------|
|
|
297
|
+
| Bug Reports | [Report Bug](https://github.com/malikrajat/rm-range-slider/issues/new?template=bug_report.md) | Technical issues |
|
|
298
|
+
| Feature Requests | [Request Feature](https://github.com/malikrajat/rm-range-slider/issues/new?template=feature_request.md) | New features |
|
|
299
|
+
| Discussions | [Join Discussion](https://github.com/malikrajat/rm-range-slider/discussions) | General questions |
|
|
300
|
+
| Email | [mr.rajatmalik@gmail.com](mailto:mr.rajatmalik@gmail.com?subject=rm-range-slider%20Support) | Direct support |
|
|
301
|
+
|
|
302
|
+
### Documentation
|
|
303
|
+
|
|
304
|
+
- [GitHub Repository](https://github.com/malikrajat/rm-range-slider)
|
|
305
|
+
- [npm Package](https://www.npmjs.com/package/rm-range-slider)
|
|
306
|
+
- [Changelog](https://github.com/malikrajat/rm-range-slider/blob/main/CHANGELOG.md)
|
|
307
|
+
|
|
308
|
+
### Community
|
|
309
|
+
|
|
310
|
+
- Star the repository to show support
|
|
311
|
+
- Watch for updates and new releases
|
|
312
|
+
- Share your use cases and feedback
|
|
313
|
+
- Contribute code or documentation
|
|
314
|
+
|
|
315
|
+
### Stay Updated
|
|
316
|
+
|
|
317
|
+
- Follow the project on [GitHub](https://github.com/malikrajat/rm-range-slider)
|
|
318
|
+
- Star the repository for updates
|
|
319
|
+
- Watch for new releases
|
|
320
|
+
|
|
321
|
+
## Other Libraries
|
|
322
|
+
|
|
323
|
+
### UI Components
|
|
324
|
+
|
|
325
|
+
| Library | Description | npm Link |
|
|
326
|
+
| ---------------------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
|
|
327
|
+
| **rm-range-slider** | Lightweight two-thumb range slider with tooltips and color customization | [](https://www.npmjs.com/package/rm-range-slider) |
|
|
328
|
+
| **rm-ng-range-slider** | Angular-specific version of the dual range slider | [](https://www.npmjs.com/package/rm-ng-range-slider) |
|
|
329
|
+
| **rm-carousel** | Simple, responsive carousel component | [](https://www.npmjs.com/package/rm-carousel) |
|
|
330
|
+
| **rm-image-slider** | Minimal image slider with smooth transitions | [](https://www.npmjs.com/package/rm-image-slider) |
|
|
331
|
+
| **rm-ng-star-rating** | Configurable Angular star rating component with readonly mode | [](https://www.npmjs.com/package/rm-ng-star-rating) |
|
|
332
|
+
|
|
333
|
+
---
|
|
334
|
+
|
|
335
|
+
### PDF & Export Libraries
|
|
336
|
+
|
|
337
|
+
| Library | Description | npm Link |
|
|
338
|
+
| -------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
339
|
+
| **rm-ng-export-to-csv** | Export JSON data to CSV with zero dependencies | [](https://www.npmjs.com/package/rm-ng-export-to-csv) |
|
|
340
|
+
| **@codewithrajat/rm-ng-pdf-export** | Image-based PDF export tool for Angular applications | [](https://www.npmjs.com/package/@codewithrajat/rm-ng-pdf-export) |
|
|
341
|
+
| **@codewithrajat/rm-ng-structure-pdf** | Generate structured PDFs for reports, invoices, or documents | [](https://www.npmjs.com/package/@codewithrajat/rm-ng-structure-pdf) |
|
|
342
|
+
|
|
343
|
+
---
|
|
344
|
+
|
|
345
|
+
### Utility Libraries
|
|
346
|
+
|
|
347
|
+
| Library | Description | npm Link |
|
|
348
|
+
| ------------------------------ | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
349
|
+
| **rm-ng-device-detection** | Detect device type, OS, and browser in Angular | [](https://www.npmjs.com/package/rm-ng-device-detection) |
|
|
350
|
+
| **rm-colorful-console-logger** | Stylish multi-color console logger for better debugging | [](https://www.npmjs.com/package/rm-colorful-console-logger) |
|
|
351
|
+
|
|
352
|
+
---
|
|
353
|
+
|
|
354
|
+
### Notifications
|
|
355
|
+
|
|
356
|
+
| Library | Description | npm Link |
|
|
357
|
+
| ----------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
|
|
358
|
+
| **rm-pushnotify** | Lightweight push-style toast notification utility | [](https://www.npmjs.com/package/rm-pushnotify) |
|
|
359
|
+
|
|
360
|
+
---
|
|
361
|
+
|
|
362
|
+
### Meta & Personal Branding
|
|
363
|
+
|
|
364
|
+
| Library | Description | npm Link |
|
|
365
|
+
| --------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
|
|
366
|
+
| **about-rajat** | Developer portfolio package for branding and quick personal info | [](https://www.npmjs.com/package/about-rajat) |
|
|
367
|
+
|
|
368
|
+
|
|
369
|
+
|
|
370
|
+
### All Packages
|
|
371
|
+
|
|
372
|
+
Browse all my packages:
|
|
373
|
+
- [npm: @codewithrajat](https://www.npmjs.com/~codewithrajat)
|
|
374
|
+
- [npm: rajatmalik](https://www.npmjs.com/~rajatmalik)
|
|
375
|
+
- [GitHub: @malikrajat](https://github.com/malikrajat?tab=repositories)
|
|
376
|
+
|
|
377
|
+
## Author
|
|
378
|
+
|
|
379
|
+
**Rajat Malik**
|
|
380
|
+
|
|
381
|
+
Full-stack developer passionate about creating developer-friendly tools and libraries.
|
|
65
382
|
|
|
66
|
-
|
|
383
|
+
- Website: [rajatmalik.dev](https://rajatmalik.dev)
|
|
384
|
+
- Email: [mr.rajatmalik@gmail.com](mailto:mr.rajatmalik@gmail.com)
|
|
385
|
+
- LinkedIn: [errajatmalik](https://linkedin.com/in/errajatmalik)
|
|
386
|
+
- GitHub: [@malikrajat](https://github.com/malikrajat)
|
|
387
|
+
- npm: [@codewithrajat](https://www.npmjs.com/~codewithrajat)
|
|
388
|
+
- npm Other: [rajatmalik](https://www.npmjs.com/~rajatmalik)
|
|
67
389
|
|
|
68
|
-
|
|
69
|
-
|------------------|----------------------------------------------------------------------------------|--------|:------------------------------------------------------------:|
|
|
70
|
-
| `min` | Minimum value of slider | number | Initially `min` value will be set `0` if not provided |
|
|
71
|
-
| `max` | Maximum value of slider | number | Initially `max` value will be set `100` if not provided |
|
|
72
|
-
| `startValue` | deafult value for first slider | number | Initially `startValue` value will be set `0` if not provided |
|
|
73
|
-
| `endValue` | deafult value for second slider | number | Initially `endValue` value will be set `10` if not provided |
|
|
74
|
-
| `onValueChanged` | On change function `onValueChanged` will send both value min and max to compoent | MINMAX | It do not return any value until changes |
|
|
390
|
+
---
|
|
75
391
|
|
|
76
|
-
## Author services
|
|
77
392
|
|
|
78
|
-
|
|
393
|
+
<p align="center">
|
|
394
|
+
<b>Built with care for the Angular community</b>
|
|
395
|
+
</p>
|
|
79
396
|
|
|
80
|
-
|
|
397
|
+
<p align="center">
|
|
398
|
+
<a href="https://github.com/malikrajat/rm-range-slider/stargazers">Star on GitHub</a> •
|
|
399
|
+
<a href="https://www.npmjs.com/package/rm-range-slider">View on npm</a> •
|
|
400
|
+
<a href="https://github.com/malikrajat/rm-range-slider/issues">Report Issue</a>
|
|
401
|
+
</p>
|
|
81
402
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
403
|
+
<p align="center">
|
|
404
|
+
Made with dedication by <a href="https://rajatmalik.dev">Rajat Malik</a>
|
|
405
|
+
</p>
|
|
@@ -0,0 +1,151 @@
|
|
|
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
|
+
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
|
+
<mat-slider
|
|
87
|
+
[min]="this.min"
|
|
88
|
+
[max]="this.max"
|
|
89
|
+
showTickMarks
|
|
90
|
+
discrete
|
|
91
|
+
[displayWith]="formatLabel"
|
|
92
|
+
(change)="onSliderInput()"
|
|
93
|
+
>
|
|
94
|
+
<input matSliderStartThumb [(ngModel)]="startValue" />
|
|
95
|
+
<input matSliderEndThumb [(ngModel)]="endValue" />
|
|
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,
|
|
101
|
+
args: [{ selector: 'rm-range-slider', imports: [MatSliderModule, FormsModule], template: `
|
|
102
|
+
<mat-slider
|
|
103
|
+
[min]="this.min"
|
|
104
|
+
[max]="this.max"
|
|
105
|
+
showTickMarks
|
|
106
|
+
discrete
|
|
107
|
+
[displayWith]="formatLabel"
|
|
108
|
+
(change)="onSliderInput()"
|
|
109
|
+
>
|
|
110
|
+
<input matSliderStartThumb [(ngModel)]="startValue" />
|
|
111
|
+
<input matSliderEndThumb [(ngModel)]="endValue" />
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rm-range-slider.mjs","sources":["../../../projects/rm-range-slider/src/lib/rm-range-slider.component.ts","../../../projects/rm-range-slider/src/public-api.ts","../../../projects/rm-range-slider/src/rm-range-slider.ts"],"sourcesContent":["import {\r\n Component,\r\n EventEmitter,\r\n Input,\r\n OnDestroy,\r\n Output,\r\n numberAttribute,\r\n} from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MatSliderModule } from '@angular/material/slider';\r\nimport { Subject, takeUntil, throttleTime } from 'rxjs';\r\nexport interface MINMAX {\r\n min: number;\r\n max: number;\r\n}\r\n\r\n@Component({\r\n selector: 'rm-range-slider',\r\n imports: [MatSliderModule, FormsModule],\r\n template: `\r\n <mat-slider\r\n [min]=\"this.min\"\r\n [max]=\"this.max\"\r\n showTickMarks\r\n discrete\r\n [displayWith]=\"formatLabel\"\r\n (change)=\"onSliderInput()\"\r\n >\r\n <input matSliderStartThumb [(ngModel)]=\"startValue\" />\r\n <input matSliderEndThumb [(ngModel)]=\"endValue\" />\r\n </mat-slider>\r\n `,\r\n styles: `\r\n mat-slider {\r\n width: 100%;\r\n }\r\n `\r\n})\r\nexport class RmRangeSliderComponent implements OnDestroy {\r\n private destroy$ = new Subject<void>();\r\n\r\n /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\r\n`RmRangeSliderComponent` component in Angular. In this specific case: */\r\n @Input({\r\n required: true,\r\n transform: numberAttribute,\r\n })\r\n startValue: number = 0;\r\n\r\n /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\r\n`RmRangeSliderComponent` component in Angular. In this specific case, the `endValue` property is\r\nbeing defined as an input property with the following configuration: */\r\n @Input({\r\n required: true,\r\n transform: numberAttribute,\r\n })\r\n endValue: number = 10;\r\n\r\n /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\r\n`RmRangeSliderComponent` component in Angular. In this specific case, the `min` property is being\r\ndefined as an input property with the following configuration: */\r\n @Input({\r\n required: true,\r\n transform: numberAttribute,\r\n })\r\n min: number = 0;\r\n\r\n /* The `@Input` decorator in the TypeScript code snippet is used to define an input property for the\r\n`RmRangeSliderComponent` component in Angular. In this specific case, the `max` property is being\r\ndefined as an input property with the following configuration: */\r\n @Input({\r\n required: true,\r\n transform: numberAttribute,\r\n })\r\n max: number = 100;\r\n\r\n /* The `@Output()` decorator in the TypeScript code snippet is used to define an output property for\r\nthe `RmRangeSliderComponent` component in Angular. In this specific case, the `getMinMax` property\r\nis being defined as an output property with the type of `EventEmitter<MINMAX>`. */\r\n @Output()\r\n public onValueChanged = new EventEmitter<MINMAX>();\r\n\r\n /**\r\n * The `onSliderInput` function sets the `value` object with `startValue` and `endValue` properties and\r\n * calls the `onSliderChange` function with this value.\r\n */\r\n onSliderInput(): void {\r\n const value: MINMAX = {\r\n min: this.startValue,\r\n max: this.endValue,\r\n };\r\n this.onSliderChange(value);\r\n }\r\n\r\n /**\r\n * The `formatLabel` function in TypeScript formats a number value by rounding it to the nearest\r\n * hundredth and appending a 'k' if the value is greater than or equal to 1000.\r\n * @param {number} value - The `value` parameter is a number that represents a numerical value which\r\n * needs to be formatted. The `formatLabel` function takes this number as input and returns a formatted\r\n * string representation of the number. If the value is greater than or equal to 1000, it will be\r\n * rounded and displayed in\r\n * @returns If the `value` is greater than or equal to 1000, the function will return the value divided\r\n * by 100 and rounded, followed by the letter 'k'. Otherwise, it will return the value as a string.\r\n */\r\n\r\n formatLabel(value: number): string {\r\n if (value >= 1000) {\r\n return Math.round(value / 100) + 'k';\r\n }\r\n return `${value}`;\r\n }\r\n\r\n /**\r\n * The `onSliderChange` function in TypeScript sets up a Subject to emit slider value changes with a\r\n * throttle time of 5000 milliseconds.\r\n * @param {MINMAX} value - The `value` parameter in the `onSliderChange` method represents the current\r\n * value of the slider, which is of type `MINMAX`.\r\n */\r\n onSliderChange(value: MINMAX): void {\r\n this.destroy$.next();\r\n this.destroy$.complete();\r\n const sliderValueChanges$ = new Subject<MINMAX>();\r\n sliderValueChanges$\r\n .pipe(throttleTime(5000), takeUntil(this.destroy$))\r\n .subscribe((newValue: MINMAX) => {\r\n this.onValueChanged.emit(newValue);\r\n });\r\n sliderValueChanges$.next(value);\r\n }\r\n\r\n /**\r\n * The ngOnDestroy function in TypeScript is used to clean up resources and unsubscribe from\r\n * observables by completing a subject.\r\n */\r\n ngOnDestroy(): void {\r\n this.destroy$.next();\r\n this.destroy$.complete();\r\n }\r\n}\r\n","/*\r\n * Public API Surface of rm-range-slider\r\n */\r\n\r\nexport * from './lib/rm-range-slider.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,64 +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
|
-
"",
|
|
7
|
-
"library",
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"angular-
|
|
13
|
-
"angular-
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
"
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
"
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
"
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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
|
+
}
|
|
64
167
|
}
|
|
@@ -0,0 +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 };
|