r-range-slider

r-slider

a reactjs plugin for all in one sliders
r-slider is a multi-purpose, highly customizable slider control plugin that helps users select a single value or a range of values in an elegant way. Also can be used to create toggle switch, progress bar, step based form wizard with your own styles. Check out the examples in the zip for more information.

Advantages of r-slider

• easy to use.
• customizable.
• unlimit style.
• responsive.
• use in many ui controls like:switch,slider,wizard,progressbar,games and other.
• rtl,ltr and vertical slider support.
• mobile support(mobile browser,phonegap,cordova and ....).

Usage

npm install @mohamadfeiz/r-slider
es5: var Slider = require("@mohamadfeiz/r-slider");
es6: import Slider from "@mohamadfeiz/r-slider";

props list

prop	Description	Type
start	Start of slider range	number
end	End of slider range	number
step	Step of change slider	number. minimum and default is 1
points	Set Slider Points. each point is an object that can get 5 properties: 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)	Array of objects
changable	This allows us to change the slider with mouse.default is true	boolean
showValue	Makes the point value appear on the point. default is true. if false , never show value, and if 'fix' alwais show value	boolean(false or true) or 'fix'
showPoint	show/hide slider points. default is true.	boolean
min	Set Minimum amount allowed.(optional)	number
max	Set Maximum amount allowed(optional)	number
scale	Scaling slider based on number of steps(optional).is an object that can get 2 properties 1- step:Step of scaling slider(number). 2- style: set inline css of scale element .(object or function that receives the value of scale as parameter).	object
label	Labeling slider based on number of steps and custom labels(optional).is an object that can get 3 properties 1- step:Step of scaling slider(number). 2- items:list of custom labels(array of objects).each object has text,value and color as properties: 3- style: set inline css of label element .(object or function that receives the value of label as parameter).	object
onchange	onchange is a callback function that is to be executed in end of changing point(s) of slider this function get all props of slider as parameter in type of object.	callback
ondrag	ondrag is a callback function that is to be executed while draging point(s) of slider this function get all props of slider as parameter in type of object.	callback
direction	Set direction of slider("left","right","up","down")(default is "right")	string
className	Set className of slider	string
id	Set id of slider	string

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