0 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.

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.

startAngle
sliderType
i

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.

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>"; }

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); }
Console

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.

function tooltipVal1(args) { var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; return months[args.value]; }
function tooltipVal2(args) { return "$ " + args.value; }

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.