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 id="slider1" class="rslider"></div>

CSS

#slider1 {
    margin: 0 auto;
}
.rs-border {
    border: 0 none;
}
.rs-control .rs-path-color {
    background-color: hsl(240, 100%, 50%);
}
.rs-handle {
    box-shadow: 0 0 4px 1px #555555;
    background-color: transparent;
}
.rs-tooltip-text{
    font-size: 66px;
    color: hsl(200, 70%, 30%);
}

JavaScript

$("#slider1").roundSlider({
    sliderType: "default",
    editableTooltip: false,
    radius: 140,
    width: 4,
    handleSize: 20,
    startAngle: 90,
    min: 0,
    max: 255,
    drag: function (args) {
        var hsl_val = args.value * 360 / 256 - 100;
        this.control.find(".rs-path-color").css({                
            "background-color": "hsl(" + hsl_val + ",100%,50%)"
        });
        this.control.find(".rs-tooltip-text").css({
            color: "hsl(" + hsl_val + ",100%,50%)"
        });
    }
});