Demos - roundSlider (A free jQuery plugin)

808 Comments Editable sample in jsFiddle | jsBin | CODEPEN

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.

Code

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.

Code

startAngle	▲▼
showTooltip
sliderType

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.

Code

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.


function changeTooltip(e) {
    var val = e.value, speed;
    if (val < 20) speed = "Slow";
    else if (val < 40) speed = "Normal";
    else if (val < 70) speed = "Speed";
    else speed = "Very Speed";

    return val + " km/h" + "<div>" + speed + "<div>";
}

Code

Properties

The following demos shows the basic usage of some properties.

min, max, step and value

Code

radius and width

Code

handleSize

Code

editableTooltip

Code

startAngle and endAngle

Code

mouseScrollAction

Code

Events

The following demo shows the basic usage of the events.


                                                    
function traceEvent(e) {
    console.log(e.type);
}

Code

Console

create event triggered

beforeCreate event triggered

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.

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.

Code

Various Slider Types

Various Circle Shapes

Different Theming and Appearances

Custom Handle Shapes

Properties

Events

Customizations

Custom Tooltip

Custom Animation