r-slider
a javascript 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.
- Placing in center of the defined container without the CSS positioning effort.
- In compact sliders ,one step changing slider button is difficult.in r-slider by click sides of point you can change slider one step.
- mobile support.
Create Slider
var slider = new slider(object); object is and object contain slider propertiesProperties
| Property | Description | Type |
|---|---|---|
| container | container is selector of slider container. Example:"#my-slider". according to example slider will render in element width id="my-slider" | string |
| start | Start of slider range | number |
| end | End of slider range | number |
| step | Step of change slider | number. minimum is 1 |
| value | Set Count Of Slider Points By Value | Array of numbers |
| changable | This allows us to move the slider, or can not move it with the mouse | boolean |
| showValue | Makes the value appear on the button | boolean |
| fixValue | Makes the value always show | boolean |
| showFill | Makes the fill line appear on the slider line or not(groove) | boolean |
| min | Set Minimum amount allowed | number |
| max | Set Maximum amount allowed | number |
| pinStep | Scale based on number of steps | number |
| labelStep | Labeling slider based on number of steps | number |
| ondrag | ondrag is a function that is to be executed while dragging point(s) of slider(callback) | callback |
| onchange | onchange is a function that is to be executed after changing(mouseup) point(s) of slider | callback |
| onbuttonmousedown | onbuttonmousedown is a function that is to be executed after mousedown on point(s) of slider | callback |
| text | list of texts that apear on sided spaces of slider point(s). usual usage is in creating switch button | Array of strings |
| direction | Set direction of slider(left,right,up,down) | string |
| style | Styling Slider width 4 properties that must set by JS.other styles must set by css | object |
Style Properties
| Property | Description |
|---|---|
| button_width | Set width of slider point(s) |
| button_height | Set height of slider point(s) |
| line_width | Set thickness of slider line(Groove) |
| margin | Set empty space in sided of slider |
Methods
| Method | Description |
|---|---|
| slider.update(object) | use this method for update slider by sending an object contain slider properties |
| slider.getState() | use this method for get slider properties with current values |
Elements
