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 ....).
npm install @mohamadfeiz/r-slider Usage
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:
|
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
|
object |
label | Labeling slider based on number of steps and custom labels(optional).is an object that can get 3 properties
|
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