Cool Jquery Round Range Slider

Today I found wonderful plugin to make range slider more attractive, With the help of this plugin you can create Circular slider, Radial slider. It Not only a round slider, it supports the quarter, half and pie circle shapes also. Following are the some features of round slider.
round-slider
Features:
* No need of images, pure JS and CSS code only
* Great look and feel
* Very easy customizable through CSS
* Supports all CSS3 animations
* Range slider support
* Linear step increment
* Touch support
* Keyboard support
* Mouse scroll support
* Open source (under MIT licence)


Round Slider Integration

First of all add required libraries on page don’t forget to add jquery core library before roundslider.js, Because round slider dependent on jquery.

<link href="roundslider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="roundslider.min.js"></script>

Here is the some demo round sliders. define unique id for each

<div id="rslider1" class="rslider"></div>
 
<div id="rslider2" class="rslider"></div>
 
<div id="rslider3" class="rslider"></div>

Finally call roundSlider() function on each id set properties as per your requirement.

<script>
$("#rslider1").roundSlider({
    sliderType: "default",
    value: 60
});
 
$("#rslider2").roundSlider({
    sliderType: "min-range",
    value: 50
});
 
$("#rslider3").roundSlider({
    sliderType: "range",
    value: "5,70"
});
</script>

DEMO || DOWNLOAD

The above example of round slider just a basic, See official documentation for more advanced features



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.