rm-range-slider v5.0.0

Range-slider

A highly optimized and fully customizable pure angular component for value range selection.

The component is not re-rendered while user moves the thumb. Even if there is a label, only the label component is re-rendered when values are changed.

RangeSlider uses angular Native's Animated library to transform thumbs / label / selected rail. These optimizations help to achieve as much native look & feel as possible using only the JS layer.

Installation

Install rm-range-slider with npm or yarn

  npm: npm install --save rm-range-slider
  yarn: yarn add rm-range-slider
              AND
  npm: ng add @angular/material
  yarn: yarn add @angular/material

Usage

Dual Range Slider uses angular hooks, so this component doesn't work with angular below below version 2.

 <rm-range-slider
    min="0"
    max="100"
    startValue="0"
    endValue="10"
    (onValueChanged)="onValueChanged($event)"
    ></rm-range-slider>

1. Add RmRangeSliderComponent to imports array of component decorater meta
2. Define Function onValueChanged onValueChanged in component like this

import {RmRangeSliderModule} from "rm-range-slider";

@Component({
  imports: [RmRangeSliderComponent],
})
  public onValueChanged(currentAmount: MINMAX): void {
    console.log(currentAmount);
  }

Version Mapping

Properties

Author services

Are you interested in this library but lacks features? Write to the author, he can do it for you.

Roadmap

rangeColor - Set color for slider line between both min and max slider's thumnail. sliderColor - Set color for slider line. sliderColorRight - Set color for right side slider line