# rm-range-slider
## See It In Action
---
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.
---
## Table of Contents
- [Why This Library](./docs/WHY_THIS_LIBRARY.md)
- [Installation](./docs/INSTALLATION.md)
- [Quick Start / Usage](./docs/USAGE.md)
- [API Reference](./docs/API.md)
- [Advanced Configuration](./docs/ADVANCED_CONFIGURATION.md)
- [Dependency Overview](#dependency-overview)
- [Compatibility](#compatibility)
- [Peer Dependencies](./docs/PEER_DEPENDENCIES.md)
- [Best Practices](./docs/BEST_PRACTICES.md)
- [Performance Optimization](./docs/OPTIMIZATION.md)
- [Browser Support](./docs/BROWSER_SUPPORT.md)
- [Versioning & Angular Compatibility](./docs/VERSION_COMPATIBILITY.md)
- [Breaking Changes](./docs/BREAKING_CHANGES.md)
- [FAQ](./docs/FAQ.md)
- [Troubleshooting](./docs/TROUBLESHOOTING.md)
- [Project Structure](./docs/PROJECT_STRUCTURE.md)
- [Roadmap](./docs/ROADMAP.md)
- [Changelog](./CHANGELOG.md)
- [License](./LICENSE)
- [Examples](./examples/README.md)
---
## Live Demo & Playground
Interactive Playground
Try all features live in your browser
|
Complete Examples
Copy-paste ready code samples
|
npm Registry
Install and view package details
|
Source Code
Star, fork, and contribute
|
---
## Features
- **Dual Range Selection** - Two draggable thumbs for selecting minimum and maximum values
- **High Performance** - Component doesn't re-render while dragging thumbs, only labels update
- **Native-Like Experience** - Uses Angular's Animated library for smooth transformations
- **Fully Customizable** - Customize colors, sizes, and appearance to match your design
- **Type-Safe** - Full TypeScript support with comprehensive type definitions
- **Material Design Integration** - Seamlessly integrates with Angular Material
- **Tree-Shakable** - Optimized for modern build tools to minimize bundle size
- **Angular 14+ Support** - Compatible with modern Angular versions including standalone components
- **Zero Configuration** - Works out of the box with sensible defaults
- **Lightweight** - Minimal footprint with optimal performance
- **Production Ready** - Battle-tested in real-world applications
---
## Live Examples
Explore our comprehensive set of live examples to see the slider in action and learn how to implement various features:
| Example | Description | Link |
|---------|-------------|------|
| **Basic Usage** | Product price filter implementation | [View Example](./examples/basic-usage) |
| **Date Range** | Selecting dates with numeric slider | [View Example](./examples/advanced-configuration) |
| **UX & Theming** | Age range Selection with custom styles | [View Example](./examples/ux-best-practices) |
| **Performance** | Debounced search with large datasets | [View Example](./examples/performance-optimization) |
| **Reactive Forms**| Integration with Angular Reactive Forms | [View Example](./examples/reactive-forms) |
| **Validation** | Logic-based constraints and gap control | [View Example](./examples/error-handling) |
---
## Quick Start
Here's a minimal example to get you started:
```typescript
import { Component } from '@angular/core';
import { RmRangeSliderComponent, MINMAX } from 'rm-range-slider';
@Component({
selector: 'app-example',
standalone: true,
imports: [RmRangeSliderComponent],
template: `
Select Price Range
Selected Range: ${{currentRange.min}} - ${{currentRange.max}}
`,
styles: [`
.slider-container {
padding: 20px;
max-width: 600px;
margin: 0 auto;
}
`]
})
export class ExampleComponent {
currentRange: MINMAX = { min: 100, max: 500 };
onValueChanged(range: MINMAX): void {
this.currentRange = range;
console.log('Range changed:', range);
}
}
```
---
## Dependency Overview
**rm-range-slider** is designed to be lightweight with minimal dependencies.
- **Zero Runtime Dependencies**: The library has no external runtime dependencies. It relies only on the Angular framework itself.
- **Peer Dependencies**: It requires `@angular/core`, `@angular/common`, and `@angular/material` as peer dependencies, which are standard in most Angular projects.
- **Development Dependencies**: All other dependencies are for development, testing, and building the library, and are not included in the final bundle.
---
## Installation & Setup
For detailed installation instructions, see our [Installation Guide](./docs/INSTALLATION.md).
## Usage
For comprehensive usage examples and API documentation, see our [Usage Guide](./docs/USAGE.md).
---
## Changelog
See [CHANGELOG.md](CHANGELOG.md) for release history and updates.
---
### Latest Release
Check the [releases page](https://github.com/malikrajat/rm-range-slider/releases) for the most recent version and updates.
---
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
**TL;DR:** You can use this library freely in commercial and personal projects.
### MIT License Summary
**You can:**
- Use commercially
- Modify the code
- Distribute
- Use privately
**You must:**
- Include the license and copyright notice
**You cannot:**
- Hold the author liable
---
## FAQ
General Questions
### What is rm-range-slider?
**rm-range-slider** is a lightweight, high-performance Angular component for single and dual range selection. It supports touch, mouse, and keyboard interactions with zero runtime dependencies.
### Is this library free to use?
Yes, it is open-source and released under the MIT license. You can use it freely in commercial and personal projects.
### Which Angular versions are supported?
Angular 14 through 24 (inclusive). The library is built with standalone components and Ivy compatibility.
### Does it work with SSR and AOT?
Yes, it is SSR-compatible and AOT-compilation ready.
### Is it tree-shakable?
Yes, the library exports side-effect-free modules optimized for modern bundlers.
Installation & Setup
### How do I install the library?
Use npm or pnpm:
```
npm install rm-range-slider
# or
pnpm add rm-range-slider
```
### Do I need to import any Angular modules?
No. Import the standalone `RmRangeSliderComponent` directly in your component's `imports` array.
### Is there an ng-add schematic?
Yes. Run `ng add rm-range-slider` to automatically configure the library in your project.
### Does it require Angular Material?
No. Angular Material is listed as a peer dependency for optional theming integration, but the slider works independently without it.
Features & Usage
### Does it support dual range selection?
Yes. You can configure a minimum and maximum value range with two draggable thumbs.
### Can I customize the appearance?
Yes. The slider supports custom colors, sizes, and styles via CSS and component inputs.
### Is it accessible?
Yes. It follows WAI-ARIA slider patterns and supports keyboard navigation for accessibility compliance.
### Does it work on mobile devices?
Yes. It supports touch gestures on iOS and Android browsers.
### Can I use it in reactive forms?
Yes. It integrates seamlessly with Angular Reactive Forms and Template-Driven Forms.
### Does it support single thumb mode?
Yes. You can use it as a single-range slider by setting only one bound value.
Troubleshooting
### The slider is not rendering. What should I check?
- Ensure `RmRangeSliderComponent` is imported in your component
- Verify Angular version compatibility (14–24)
- Check the browser console for errors
### How do I fix value sync issues?
Use the `onValueChanged` event to capture updates and update your form/model values accordingly.
### Can I use this with Angular 13 or earlier?
No. This library requires Angular 14 or later due to standalone component requirements.
### Why are styles not applying?
Make sure you are using the correct CSS custom properties or class names as documented in the [Usage Guide](./docs/USAGE.md).
Performance & Bundle Size
### Does this library affect bundle size?
Minimally. It is tree-shakable, has no runtime dependencies, and uses Angular's native change detection efficiently.
### How does it handle performance during drag?
The component prevents unnecessary re-renders while dragging; only the labels update in real time for smooth interactions.
### Is it compatible with lazy-loaded modules?
Yes. Because it is standalone, it works perfectly in lazy-loaded feature modules.
### Does it impact server-side rendering (SSR)?
No. It is designed to be SSR-compatible and safe for Angular Universal apps.
---
## Browser Compatibility
### Supported Browsers
| Browser | Version | Support Level | Notes |
|---------|---------|---------------|-------|
| Chrome | 80+ | Full Support | Recommended browser |
| Firefox | 75+ | Full Support | Works perfectly |
| Safari | 13+ | Full Support | iOS and macOS |
| Edge | 80+ | Full Support | Chromium-based |
| Opera | 67+ | Full Support | Works well |
| Samsung Internet | 12+ | Full Support | Mobile support |
### Mobile Support
- iOS Safari 13+
- Chrome for Android 80+
- Samsung Internet
- All mobile browsers with modern JavaScript support
### Download Behavior by Platform
| Platform | Behavior |
|----------|----------|
| Desktop Chrome/Firefox/Edge | Direct download to Downloads folder |
| Desktop Safari | May prompt for download location |
| iOS Safari | Opens download manager |
| Android Chrome | Downloads to Downloads folder |
| Mobile Safari | Shows share sheet with save option |
### Not Supported
- Internet Explorer (all old versions)
- Very old mobile browsers (pre-2019)
---
## Statistics
[](https://www.npmjs.com/package/rm-range-slider)
[](https://www.npmjs.com/package/rm-range-slider)
[](https://github.com/malikrajat/rm-range-slider/issues)
[](https://github.com/malikrajat/rm-range-slider/stargazers)
[](https://github.com/malikrajat/rm-range-slider/blob/main/LICENSE)
---
## Support This Project
If **rm-range-slider** has helped you build better Angular applications, please consider:
If this library has saved you development time and helped create amazing image sliders in your projects, **please consider giving it a star!**
**Why star this repo?**
- Help other developers discover this lightweight, optimized solution
- Support continued development and improvements
- Show appreciation for free, quality tools
- Boost visibility in the Angular community
- Increases visibility in the Angular community
- Supports ongoing development and maintenance
- Encourages more open-source contributions
- Helps other developers find quality tools
### **Want More Quality Libraries?**
This is just one of several useful libraries I've created. **[Explore my other Angular & web development libraries](https://github.com/malikrajat?tab=repositories)** that might solve your next challenge:
- **Utility libraries** for common development tasks
- **UI components** for better user experiences
- **Performance tools** for optimization
- **Mobile-friendly solutions** for responsive apps
**Found them helpful?** A star on each repo you find useful helps tremendously! It takes just one click but means the world to open-source maintainers.
[](https://github.com/malikrajat?tab=repositories)
[](https://github.com/malikrajat)
[](https://github.com/malikrajat/rm-range-slider/stargazers)
---
## Support and Community
### Getting Help
Need assistance? We're here to help!
| Support Channel | Link | Best For |
|----------------|------|----------|
| Bug Reports | [Report Bug](https://github.com/malikrajat/rm-range-slider/issues/new?template=bug_report.md) | Technical issues |
| Feature Requests | [Request Feature](https://github.com/malikrajat/rm-range-slider/issues/new?template=feature_request.md) | New features |
| Discussions | [Join Discussion](https://github.com/malikrajat/rm-range-slider/discussions) | General questions |
| Email | [mr.rajatmalik@gmail.com](mailto:mr.rajatmalik@gmail.com?subject=rm-range-slider%20Support) | Direct support |
### Documentation
- [GitHub Repository](https://github.com/malikrajat/rm-range-slider)
- [npm Package](https://www.npmjs.com/package/rm-range-slider)
- [Changelog](https://github.com/malikrajat/rm-range-slider/blob/main/CHANGELOG.md)
### Community
- Star the repository to show support
- Watch for updates and new releases
- Share your use cases and feedback
- Contribute code or documentation
### Stay Updated
- Follow the project on [GitHub](https://github.com/malikrajat/rm-range-slider)
- Star the repository for updates
- Watch for new releases
---
## Acknowledgments
This library was created to provide a simple, lightweight solution for CSV export in Angular applications. Special thanks to the Angular community for their feedback and contributions.
Special thanks to:
- **[Angular Team](https://angular.dev/)** - Amazing framework and ecosystem
- **Contributors** - Thank you for making this library better
- **Community** - For feedback and feature requests
---
## Other Libraries
### UI Components
| Library | Description | npm Link |
|-----------------------------------| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| **rm-range-slider** | Lightweight two-thumb range slider with tooltips and color customization | [](https://www.npmjs.com/package/rm-range-slider) |
| **rm-ng-range-slider** | Angular-specific version of the dual range slider | [](https://www.npmjs.com/package/rm-ng-range-slider) |
| **rm-carousel** | Simple, responsive carousel component | [](https://www.npmjs.com/package/rm-carousel) |
| **rm-image-slider** | Minimal image slider with smooth transitions | [](https://www.npmjs.com/package/rm-image-slider) |
| **rm-ng-star-rating** | Configurable Angular star rating component with readonly mode | [](https://www.npmjs.com/package/rm-ng-star-rating) |
| **@codewithrajat/rm-ng-typeahead** | Angular autocomplete/typeahead component with search suggestions and keyboard navigation | [](https://github.com/malikrajat/rm-ng-typeahead) |
| **@codewithrajat/rm-ng-editor** | Rich text editor component for Angular applications with customizable toolbar support | [](https://github.com/malikrajat/rm-ng-editor) |
---
### PDF & Export Libraries
| Library | Description | npm Link |
| -------------------------------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **rm-ng-export-to-csv** | Export JSON data to CSV with zero dependencies | [](https://www.npmjs.com/package/rm-ng-export-to-csv) |
| **@codewithrajat/rm-ng-pdf-export** | Image-based PDF export tool for Angular applications | [](https://www.npmjs.com/package/@codewithrajat/rm-ng-pdf-export) |
| **@codewithrajat/rm-ng-structure-pdf** | Generate structured PDFs for reports, invoices, or documents | [](https://www.npmjs.com/package/@codewithrajat/rm-ng-structure-pdf) |
| **@codewithrajat/rm-ng-pdf-viewer** | Angular PDF viewer component with zoom, navigation, and document rendering support | [](https://github.com/malikrajat/rm-ng-pdf-viewer) |
---
### Chrome Extension
| Library | Description | Link |
|----------|-------------|-----------------------------------------------------------------------------------------------------------------------------------------|
| **quickocr** | Chrome extension that extracts text from images using OCR technology | [](https://github.com/malikrajat/quickocr/releases) |
| **readLoude** | Chrome extension that read you web page loude e.g article etc. | [](https://github.com/malikrajat/readLoude/releases) |
| **ai-assistant-reply** | AI Chrome extension to auto generate reply on linked in posts. | [](https://github.com/malikrajat/ai-assistant-reply/releases) |
---
### VS Code Extension
| Library | Description | Link |
|----------|-------------|-------------------------------------------------------------------------------------------------------------------------------------------|
| **dead-css-cleaner** | VS Code extension for identifying and cleaning unused CSS styles | [](https://github.com/malikrajat/dead-css-cleaner/releases) |
| **file-coverage-insight** | VS Code extension for auto generated component file coverage automatelly on open. | [](https://github.com/malikrajat/file-coverage-insight/releases) |
---
### Desktop Applications - All Plateform
| Library | Description | Link |
|----------|-------------|--------------------------------------------------------------------------------------------------------------------------------|
| **deepwork** | Cross-platform productivity application for focus sessions and deep work tracking | [](https://github.com/malikrajat/deepwork/releases) |
| **JsSandbox** | Cross-platform JavaScript playground and code execution environment | [](https://github.com/malikrajat/JsSandbox/releases) |
---
### Device Detection
| Library | Description | npm Link |
| ------------------------------ | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| **rm-ng-device-detection** | Detect device type, OS, and browser in Angular | [](https://www.npmjs.com/package/rm-ng-device-detection) |
---
### Notifications
| Library | Description | npm Link |
| ----------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| **rm-pushnotify** | Lightweight push-style toast notification utility | [](https://www.npmjs.com/package/rm-pushnotify) |
| **@codewithrajat/rm-toast-notification** | Cross-platform toast and desktop notification library for web, Angular, and desktop applications | [](https://github.com/malikrajat/rm-toast-notification) |
---
### Layout & Dynamic Rendering
| Library | Description | Link |
|----------|-------------|------|
| **rm-ng-dynamic-layout** | Dynamic layout rendering engine for Angular applications using JSON-driven UI configuration | [](https://github.com/malikrajat/rm-ng-dynamic-layout) |
---
### Developer Tools & Extensions
| Library | Description | Link |
|----------|-------------|---------------------------------------------------------------------------------------------------------------------------------|
| **rm-colorful-console-logger** | Structured and colorized console logging utility for developers | [](https://www.npmjs.com/package/rm-colorful-console-logger) |
---
### Meta & Personal Branding
| Library | Description | npm Link |
| --------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| **about-rajat** | Developer portfolio package for branding and quick personal info | [](https://www.npmjs.com/package/about-rajat) |
---
### All Packages
Browse all my packages:
- [npm: @codewithrajat](https://www.npmjs.com/~codewithrajat)
- [npm: rajatmalik](https://www.npmjs.com/~rajatmalik)
- [GitHub: @malikrajat](https://github.com/malikrajat?tab=repositories)
---
## Author
**Rajat Malik**
Full‑Stack Developer and Frontend Architect at Siemens with 14+ years building scalable enterprise platforms, specializing in micro‑frontends, AI‑native development, React, and Angular.
Author of 10+ open‑source libraries and 100+ technical articles, driving innovation through developer‑friendly tools, performance optimization, and AI‑assisted workflows.
### GET IN TOUCH
- Portfolio: [rajatmalik.dev](https://rajatmalik.dev)
- Email: [mr.rajatmalik@gmail.com](mailto:mr.rajatmalik@gmail.com)
- LinkedIn: [errajatmalik](https://linkedin.com/in/errajatmalik)
- GitHub: [@malikrajat](https://github.com/malikrajat)
- npm: [rajatmalik](https://www.npmjs.com/~rajatmalik)
### SOCIAL PRESENCE
- Threads: [rajatmalik](https://www.threads.net/@er.rajatmalik)
- Twitter/X: [rajatmalik](https://x.com/er_rajatmalik)
- BlueSky: [rajatmalik](http://devrajat.bsky.social)
### CONTENT & WRITING
- Medium: [rajatmalik]( https://medium.com/@codewithrajat)
- Dev.to: [rajatmalik]( https://dev.to/codewithrajat)
- Substack: [ajatmalik](https://codewithrajat.substack.com)
- Hashnode: [rajatmalik](https://hashnode.com/@codeswithrajat)
---
Made with care and love by Rajat Malik for the Angular community
Star on GitHub •
View on npm •
Report Issue
Made with dedication by Rajat Malik
