round slider - a demo for arc slider

demo for circular arc slider

by pradeep

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 - A demo with arc slider</h2> 
<p>For more details check the website: <a href="http://roundsliderui.com/">http://roundsliderui.com/</a></p><br/>


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

CSS

#arc-slider {
    height: 110px !important;
    width: 500px !important;
    border: 1px dashed;
    overflow: hidden;
    padding: 15px;
}
#arc-slider .rs-container {
    margin-left: -350px; /* here 300 is the radius value */
    left: 50%;
}
#arc-slider .rs-tooltip {
    top: 60px;
}
#arc-slider .rs-tooltip-text {
    font-size: 25px;
}
#arc-slider .rs-border{
    border-width: 0px;
}

/* Appearance related changes */
.rs-control .rs-range-color {
    background-color: #54BBE0;
}
.rs-control .rs-path-color {
    background-color: #5f5f5f;
}
.rs-control .rs-handle {
    background-color: #51c5cf;
}

JavaScript

$("#arc-slider").roundSlider({
    sliderType: "min-range",
    circleShape: "custom-quarter",
    value: 75,
    startAngle: 45,
    editableTooltip: true,
    radius: 350,
    width: 6,
    handleSize: "+32",
    tooltipFormat: function (args) {
        return args.value + " %";
    }
});