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.

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

="rslider1" class="rslider">>
 
="rslider2" class="rslider">>
 
="rslider3" class="rslider">
>

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>