jquery round slider - step feature

A free jQuery plugin and also can call as radial slider and circular slider. For more info please visit: http://roundsliderui.com/

by Soundar Pandian

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css">
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>
<h2>roundSlider</h2> 
<p>For more details check the website: <a href="http://roundsliderui.com/">http://roundsliderui.com/</a></p>

<div class="box">
    <h3>Step - 20</h3>
    <div id="slider1" class="rslider"></div>
</div>

<div class="box">
    <h3>Step - 0.1</h3>
    <div id="slider2" class="rslider"></div>
</div>

CSS

.box{
    display: inline-block;
    padding: 0 20px;
}

JavaScript

$("#slider1").roundSlider({
    sliderType: "default",
    step: 20,
    value: 20
});

$("#slider2").roundSlider({
    sliderType: "min-range",
    min: 0,
    max: 10,
    step: 0.1,
    value: 4
});