| startAngle | |
| sliderType |
Various Slider Types
There are three types of sliders available such as default, min-range and range slider. The default and min-range sliders are the similar which is used to select a single value inbetween the min and max values. In case of range slider, it is used to selece a range of values.
To see the code snipet, hover the corrsponding demo and click the Code button inside of it.
Various Circle Shapes
The roundSlider not only means the complete round circle, it also supports the most commonly used circle shapes such as:
- Quarter Circle [ quarter-top-left, quarter-top-right, quarter-bottom-left, quarter-bottom-right ]
- Half Circle [ half-top, half-bottom, half-left, half-right ]
- Pie shape
To see the code snipet, hover the corrsponding demo and click the Code button inside of it.
Different Theming and Appearances
The following demos show that, in what are the ways we can customize the control. The below examples may provide an idea to make different look and feel.
To see the code snipet, hover the corrsponding demo and click the Code button inside of it.
Custom Handle Shapes
The handle shapes are defined in the ".rs-handle" class. By customizing this class we can make different shapes of handle.
The below examples shows the gauge like appearances.
To see the code snipet, hover the corrsponding demo and click the Code button inside of it.
Properties
The following demos shows the basic usage of some properties.
Events
The following demo shows the basic usage of the events.
function traceEvent(e) {
console.log(e.type);
}
Customizations
Due to the flexibility of roundSlider, the user can do any customization based on their requirement. Here, some examples for the basic customization.
To see the code snipet, hover the corrsponding demo and click the Code button inside of it.
Custom Tooltip
The control provides the callback function for the tooltip value. By using that callback function we can customize the tooltip like any format.
Custom Animation
As roundSlider uses the CSS3 transition for animations, so we can use any other transition styles for different animation effects.
To use different animation just enought to change the CSS property of "transition-timing-function". In the below example you can see, how to use the custom animation. To know more about "transition-timing-function", check here.