round slider

demo for half circular slider and half round slider

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

<div id="half-slider" class="rslider"></div>

CSS

.rs-control {
    display: inline-block;
    float: left;
    margin-left: 30px;
}
.rs-control .rs-path-color {
    background-color: #e9e9e9;
}

JavaScript

$("#slider").roundSlider({
    width: 10,
    handleSize: "+8",
    value: "40"
});

$("#half-slider").roundSlider({
    width: 10,
    circleShape: "half-top",
    handleSize: "+8",
    value: "80"
});