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

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);
  }
}

Live Demo & Playground

Try it yourself! Interactive demos available now:

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

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.

Compatibility

2.1 Angular Version Support

This library is compatible with a wide range of Angular versions:

• Supported Versions: Angular >=14.0.0 <21.0.0

2.2 Browser Support

The component is tested and compatible with all modern evergreen browsers.

Internet Explorer and legacy Edge are not supported.

2.3 Platform Support

rm-range-slider is platform-agnostic. It works on any operating system that can run a supported web browser, including:

• Windows
• macOS
• Linux
• iOS
• Android

Installation & Setup

For detailed installation instructions, see our Installation Guide.

Usage

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support This Project

If rm-range-slider has helped you build better Angular applications, please consider:

Star This Repository

A star helps other developers discover this library!

Why Your Star Matters

• Increases visibility in the Angular community
• Supports ongoing development and maintenance
• Encourages more open-source contributions
• Helps other developers find quality tools

Statistics

Acknowledgments

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!

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

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

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

Utility Libraries

Library	Description	npm Link
rm-ng-device-detection	Detect device type, OS, and browser in Angular
rm-colorful-console-logger	Stylish multi-color console logger for better debugging

Notifications

Library	Description	npm Link
rm-pushnotify	Lightweight push-style toast notification utility

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

Built with care for the Angular community

Star on GitHub • View on npm • Report Issue

Made with dedication by Rajat Malik