Home
Advanced, customizable, optimized, minimal, lightweight and fully customizable pure Angular component for dual value range selection. Built with performance in mind for modern Angular applications with zero dependencies.
- Features
- Live Demo
- Why This Library?
- Installation
- Quick Start
- API Reference
- Usage Examples
- Best Practices
- Advanced Configuration
- Browser Compatibility
- Performance Optimization
- Troubleshooting
- Roadmap
- Contributing
- Other Libraries
- Support
- License
- 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
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 |
Most range slider libraries for Angular either:
- Re-render the entire component on every value change (poor performance)
- Lack proper TypeScript support
- Don't integrate well with Angular Material
- Have heavy dependencies that bloat bundle size
- Provide limited customization options
rm-range-slider provides:
- Optimized Performance: Only label components re-render during value changes, thumbs transform using native animations
- Angular-First: Built specifically for Angular with proper service injection and TypeScript
- Material Integration: Works seamlessly with Angular Material design system
- Developer-Friendly: Clear API, comprehensive examples, and excellent documentation
- Lightweight: Minimal dependencies and optimized bundle size
- Price Range Filters - E-commerce product filtering by price range
- Date Range Selection - Select date ranges for reports and analytics
- Numeric Filters - Filter data by numeric ranges (age, quantity, score)
- Audio/Video Controls - Trim or select segments in media files
- Data Visualization - Select data ranges in charts and graphs
- Settings & Configuration - Adjust range-based settings in applications
- Form Inputs - Capture range values in forms and surveys
Choose your preferred package manager:
# npm
npm install rm-range-slider --save
yarn
yarn add rm-range-slider
The library requires Angular Material as a peer dependency:
# npm
npm install @angular/material
or using Angular CLI
ng add @angular/material
yarn
yarn add @angular/material
| Dependency | Version | Purpose |
|---|---|---|
| @angular/core | ^14.0.0+ | Angular framework |
| @angular/material | ^14.0.0+ | Material Design components |
- Star the repository to show support
- Watch for updates and new releases
- Share your use cases and feedback
- Contribute code or documentation
- Follow the project on GitHub
- Star the repository for updates
- Watch for new releases
See CHANGELOG.md for release history and updates.
This project is licensed under the MIT License - see the LICENSE file for details.
TL;DR: You can use this library freely in commercial and personal projects.
You can:
- Use commercially
- Modify the code
- Distribute
- Use privately
You must:
- Include the license and copyright notice
You cannot:
- Hold the author liable
This library wouldn't be possible without these amazing open-source projects:
- Angular Team - Amazing framework and ecosystem
- Angular Material - Material Design components
- Contributors - Thank you for making this library better
Special thanks to the Angular community for feedback and support!
Q: What's the difference between rm-range-slider and rm-ng-range-slider?
A: Both packages provide the same functionality. rm-range-slider is the original package, while rm-ng-range-slider follows Angular naming conventions. Choose the one that fits your preference.
Q: Can I use this in production applications?
A: Yes! The library is production-ready and has been battle-tested in real-world applications. It's optimized for performance and follows Angular best practices.
Q: Does this work with Angular Material themes?
A: Yes, the slider integrates seamlessly with Angular Material and respects your application's theme.
Q: Can I customize the slider colors?
A: Custom color support is planned for future releases (see Roadmap). Currently, the slider uses your Angular Material theme colors.
Q: Does this support vertical sliders?
A: Vertical orientation is planned for a future release. Currently, only horizontal orientation is supported.
Q: Can I add custom tooltips?
A: The slider shows the current values, but custom tooltip styling is not yet available. This feature is on the roadmap.
Q: How do I prevent thumbs from overlapping?
A: You can add validation in your onValueChanged handler to enforce a minimum gap between the min and max values.
Q: Does this work with reactive forms?
A: Yes! See the "Integration with Reactive Forms" section in Advanced Configuration for examples.
Q: Can I use this with server-side rendering (SSR)?
A: Yes, the component is compatible with Angular Universal/SSR. Ensure Angular Material is properly configured for SSR in your application.
Q: What's the maximum range I can use?
A: There's no hard limit, but for very large ranges (e.g., 0 to 1,000,000), consider using logarithmic scaling or step values for better usability.
Q: Does this support touch gestures?
A: Yes, the slider is fully touch-enabled and works on mobile devices with smooth touch interactions.
Q: Can I use multiple sliders on the same page?
A: Yes, you can use as many sliders as needed. For performance with many sliders, use ChangeDetectionStrategy.OnPush.
Rajat Malik
Full-stack developer passionate about creating developer-friendly tools and libraries.
- Website: rajatmalik.dev
- Email: mr.rajatmalik@gmail.com
- LinkedIn: errajatmalik
- GitHub: @malikrajat
- npm: @codewithrajat
- npm Other: rajatmalik
If rm-range-slider has helped you build better Angular applications, please consider:
A star helps other developers discover this library!
- Increases visibility in the Angular community
- Supports ongoing development and maintenance
- Encourages more open-source contributions
- Helps other developers find quality tools
This library was created to provide a lightweight, performant solution for dual-range selection in Angular applications. Special thanks to the Angular community for their feedback and contributions.
<p align="center"> <b>Built with care for the Angular community</b> </p> <p align="center"> <a href="https://github.com/malikrajat/rm-range-slider/stargazers">Star on GitHub</a> • <a href="https://www.npmjs.com/package/rm-range-slider">View on npm</a> • <a href="https://github.com/malikrajat/rm-range-slider/issues">Report Issue</a> </p> <p align="center"> Made with dedication by <a href="https://rajatmalik.dev">Rajat Malik</a> </p>