rm-range-slider

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 my-project with npm

  npm: npm install --save rm-range-slider
  yarn: yarn add rn-range-slider

Usage

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

...

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

...

<rm-range-slider
	[SliderMinRange]="0"
	[showToolTip]="true"
	[doubleSlider]="true"
	[SliderMaxRange]="100"
	[disabled]="false"
	[setMinValue]="10"
	[setMaxValue]="60"
	[toolTipColor]="'#8a00e5'"
	[rangeColor]="'#8a00e5'"
	[sliderColor]="'#C6C6C6'"
	[toolTipColorHover]="'#b200e5ff'"
	[toolTipColorHoverShadow]="'rgba(108, 0, 119, 0.3)'"
	[sliderColorRight]="'rgba(239,7,65,0.98)'"
	(onValueChanged)="onValueChanged($event)"
></rm-range-slider>
... 

add root lavel style file
:root {
	--tooltip-arrow: red;
	--slider-thumb-color: blue;
	--slider-thumb-color-hover: blue;
	--slider-thumb-color-hover-shadow:  rgba(108, 0, 119, 0.3);
}
... 

Properties

Name	Description	Type	Default Value
SliderMinRange	Minimum value of slider	number	Initially min value will be set 0 if not provided
SliderMaxRange	Maximum value of slider	number	Initially max value will be set 100 if not provided
showToolTip	Show or hide tool tip	boolean	Initially value will be set false if not provided
doubleSlider	Use like SIngle Slider or double slider	boolean	Initially value will be set true if not provided
disabled	Disable or enable the slider moment	boolean	Initially value will be set false if not provided
setMinValue	Min value for slider's thumbnail to set on	number	Initially min value will be set 0 if not provided
setMaxValue	Max value for slider's thumbnail to set on	boolean	Initially max value will be set 100 if not provided
toolTipColor	set color for tool tip	string	Initially set default color for tool tip is #8a00e5
rangeColor	Set color for slider line between both min and max slider's thumnail	string	Initially set default color for tool tip is rgba(255,255,255,0.99)
sliderColor	Set color for slider line	string	Initially set default color for tool tip is rgba(255,255,255,0.47)
toolTipColorHover	set color for tool tip on hover	string	Initially set default color for tool tip is #8a00e5'
toolTipColorHoverShadow	set shadow color for tool tip on hover	string	Initially set default color for tool tip is #8a00e5'
sliderColorRight	Set color for right side slider line	string	Initially set default color for tool tip is rgb(198, 198, 198)
onValueChanged	Emit both value object of min and max	object	It do not return any value until changes

All the other props (e.g. style) will be passed to root container component.