roundslider

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

by Juan Muñoz

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.roundslider/1.2/roundslider.min.css">
<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>

<div id="slider2" class="rslider"></div>

<div id="slider3" class="rslider"></div>

<div id="total">
</div>













<br/><br/><br/>
<p>
    See also: 
    <a target="_blank" href="http://roundsliderui.com/demos.html">Demos</a>,
    <a target="_blank" href="http://roundsliderui.com/document.html">Documentation</a>, and
    <a target="_blank" href="http://roundsliderui.com/demos.html#different-theming-and-appearances">Different Theming</a>
</p>

CSS

.rslider {
  display: inline-block;
  margin-top: 20px;
  margin-left: 20px;
}
.rs-bg-color { background-color:transparent;}

#total {
  display: block;
  padding: 10px;
  margin: auto;
  width:100%;
  font-size: largest;
  font-weight: 500;
}

JavaScript

/*!
 * roundSlider v1.2 | (c) 2015-2016, Soundar
 * MIT license | http://roundsliderui.com/licence.html
 */

(function ($, window, undefined) {
    "use strict";
    /*jslint nomen: true */

    var pluginName = "roundSlider";

    // The plugin initialization
    $.fn[pluginName] = function (options) {
        return CreateRoundSlider.call(this, options, arguments);
    };

    RoundSlider.prototype = {

        pluginName: pluginName,
        version: "1.2",

        // after the control initialization the updated default values
        // are merged into the options
        options: {},

        // default properties of the plugin. while add a new property,
        // that type should be included in the "_props:" for validation
        defaults: {
            min: 0,
            max: 100,
            step: 1,
            value: null,
            radius: 85,
            width: 18,
            handleSize: "+0",
            startAngle: 0,
            endAngle: "+360",
            animation: true,
            showTooltip: true,
            editableTooltip: true,
            readOnly: false,
            disabled: false,
            keyboardAction: true,
            mouseScrollAction: false,
            lineCap: "square",
            sliderType: "default",
            circleShape: "full",
            handleShape: "round",

            // events
            beforeCreate: null,
            create: null,
            start: null,
            drag: null,
            change: null,
            stop: null,
            tooltipFormat: null
        },
        _props: function () {
            return {
                numberType: ["min", "max", "step", "radius", "width", "startAngle"],
                booleanType: ["animation", "showTooltip", "editableTooltip", "readOnly", "disabled",
                    "keyboardAction", "mouseScrollAction"],
                stringType: ["sliderType", "circleShape", "handleShape", "lineCap"]
            };
        },
        control: null,
   ...