rangeslide.js Examples

Here is basic range slider using default configuration:

We can change thumb size and show some labels:

Next lets show labels (with ticks) at the bottom and value indicator (on thumb by default):

It is also possible to show labels above and change value indicator appearance and placement:

We can even alternate labels placement (useful when it get's too crowded):

Range slider can as well be used as toggle button - just add some side labels:

Now let's change what is displayed in the indicator and show some markers on the track:

And let's make them a little more fancy by showing progress on markers:

Markers size can be altered and progress can also be idicated on the track itself:

Last but not least we can activate auto play mode (one time or loop):

Data preview: