r-range-slider

r-range-slider

r-range-slider is a range slider created by reactjs.

• Unlimit Styling.
• Single point , double points and multi points support.
• Change points in wonderfull ways.
• Mobile Support(good for using in mobile browsers ,phonegap ,cordova or other hybrid frameworks).
• Responsive.
• right , left ,top ,botton direction support.

Usage

npm install r-range-slider

load

import Slider from "r-range-slider";

import React from 'react';

props list

Prop	Description	Type	Default
start	Start of slider range	number
end	End of slider range	number
step	Step of change slider	number	1
min	Set Minimum amount allowed	number	optional
max	Set Maximum amount allowed(optional)	number	optional
points	Set Slider Points	array of objects
changable	This allows us to change the slider with mouse	boolean	true
showValue	Makes the point value appear on the point.if false , never show value, and if 'fixed' alwais show value	boolean or 'fixed'
label	Labeling slider based on number of steps or custom labels	object	optional
onchange	callback function that is to be executed in end of changing point(s) of slider. this function get all props of slider as parameter	function
ondrag	callback function that is to be executed while draging point(s) of slider. this function get all props of slider as parameter.	function
direction	Set direction of slider("left","right","top","bottom")	string	"right"
className	Set className of slider	string	optional
id	Set id of slider	string	optional

• 1- value:value of point in range(number).
• 2- fillColor: set color of range line in slider.(string or function that receives the point object as parameter).(default is 'blue')
• 3- text: this text will be rendered in center of range line.(string or function that receives the point object as parameter).
• 4- className:set className for point.useful in set style of point.(string)
• 5- style:set inline css for point.(object or function that receives the point object as parameter)

Single range width Label Demo
use custome style and range text
Use slider as switch
Use slider as triple mode switch
Awesome Demos