rm-range-slider

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
• Installation
• Quick Start / Usage
• API Reference
• Advanced Configuration
• Dependency Overview
• Compatibility
• Peer Dependencies
• Best Practices
• Performance Optimization
• Browser Support
• Versioning & Angular Compatibility
• Breaking Changes
• FAQ
• Troubleshooting
• Project Structure
• Roadmap
• Changelog
• License
• Examples

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:

Quick Start

Here's a minimal example to get you started:

import { Component } from '@angular/core';
import { RmRangeSliderComponent, MINMAX } from 'rm-range-slider';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [RmRangeSliderComponent],
  template: `
    <div class="slider-container">
      <h2>Select Price Range</h2>
      <rm-range-slider
        [min]="0"
        [max]="1000"
        [startValue]="100"
        [endValue]="500"
        (onValueChanged)="onValueChanged($event)"
      ></rm-range-slider>
      <p>Selected Range: ${{currentRange.min}} - ${{currentRange.max}}</p>
    </div>
  `,
  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.

Usage

For comprehensive usage examples and API documentation, see our Usage Guide.

Changelog

See CHANGELOG.md for release history and updates.

Latest Release

Check the releases page for the most recent version and updates.

License

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.

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

npm install rm-range-slider
# or
pnpm add rm-range-slider

Browser Compatibility

Supported Browsers

Mobile Support

• iOS Safari 13+
• Chrome for Android 80+
• Samsung Internet
• All mobile browsers with modern JavaScript support

Download Behavior by Platform

Not Supported

• Internet Explorer (all old versions)
• Very old mobile browsers (pre-2019)

Statistics

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 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.

Support and Community

Getting Help

Need assistance? We're here to help!

Documentation

• GitHub Repository
• npm Package
• Changelog

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
• 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 - 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
rm-ng-range-slider	Angular-specific version of the dual range slider
rm-carousel	Simple, responsive carousel component
rm-image-slider	Minimal image slider with smooth transitions
rm-ng-star-rating	Configurable Angular star rating component with readonly mode
@codewithrajat/rm-ng-typeahead	Angular autocomplete/typeahead component with search suggestions and keyboard navigation
@codewithrajat/rm-ng-editor	Rich text editor component for Angular applications with customizable toolbar support

PDF & Export Libraries

Library	Description	npm Link
rm-ng-export-to-csv	Export JSON data to CSV with zero dependencies
@codewithrajat/rm-ng-pdf-export	Image-based PDF export tool for Angular applications
@codewithrajat/rm-ng-structure-pdf	Generate structured PDFs for reports, invoices, or documents
@codewithrajat/rm-ng-pdf-viewer	Angular PDF viewer component with zoom, navigation, and document rendering support

Chrome Extension

Library	Description	Link
quickocr	Chrome extension that extracts text from images using OCR technology
readLoude	Chrome extension that read you web page loude e.g article etc.
ai-assistant-reply	AI Chrome extension to auto generate reply on linked in posts.

VS Code Extension

Library	Description	Link
dead-css-cleaner	VS Code extension for identifying and cleaning unused CSS styles
file-coverage-insight	VS Code extension for auto generated component file coverage automatelly on open.

Desktop Applications - All Plateform

Library	Description	Link
deepwork	Cross-platform productivity application for focus sessions and deep work tracking
JsSandbox	Cross-platform JavaScript playground and code execution environment

Device Detection

Library	Description	npm Link
rm-ng-device-detection	Detect device type, OS, and browser in Angular

Notifications

Library	Description	npm Link
rm-pushnotify	Lightweight push-style toast notification utility
@codewithrajat/rm-toast-notification	Cross-platform toast and desktop notification library for web, Angular, and desktop applications

Layout & Dynamic Rendering

Library	Description	Link
rm-ng-dynamic-layout	Dynamic layout rendering engine for Angular applications using JSON-driven UI configuration

Developer Tools & Extensions

Library	Description	Link
rm-colorful-console-logger	Structured and colorized console logging utility for developers

Meta & Personal Branding

Library	Description	npm Link
about-rajat	Developer portfolio package for branding and quick personal info

All Packages

Browse all my packages:

• npm: @codewithrajat
• npm: rajatmalik
• GitHub: @malikrajat

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
• Email: mr.rajatmalik@gmail.com
• LinkedIn: errajatmalik
• GitHub: @malikrajat
• npm: rajatmalik

SOCIAL PRESENCE

• Threads: rajatmalik
• Twitter/X: rajatmalik
• BlueSky: rajatmalik

CONTENT & WRITING

• Medium: rajatmalik
• Dev.to: rajatmalik
• Substack: ajatmalik
• Hashnode: rajatmalik

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