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

| Slider | Ng | |--------|------| | 0.0.1 | 14.x | | 1.0.0 | 15.x | | 2.0.0 | 16.x | | 3.0.0 | 17.x | | 4.0.0 | 18.x |

Properties

| Name | Description | Type | Default Value | |------------------|----------------------------------------------------------------------------------|--------|:------------------------------------------------------------:| | min | Minimum value of slider | number | Initially min value will be set 0 if not provided | | max | Maximum value of slider | number | Initially max value will be set 100 if not provided | | startValue | deafult value for first slider | number | Initially startValue value will be set 0 if not provided | | endValue | deafult value for second slider | number | Initially endValue value will be set 10 if not provided | | onValueChanged | On change function onValueChanged will send both value min and max to compoent | MINMAX | It do not return any value until changes |

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