Circular dial with roundSlider

The roundSlider can be used as the infinite dial, also this can be customize to any particular range also

by pradeep

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.js"></script>
<h2><a target="_blank" href="http://roundsliderui.com/">roundSlider (v1.3.3)</a> as dial</h2>


<div class="box">
  <h1>Dial 1 <span></span></h1>
  <div id="dial1"></div>
</div>

CSS

#dial1 .rs-inner.rs-border {
  border: 0;
}
.rs-tooltip {
  font-size: 24px;
  color: gray;
}

/*** sample alignment styles ***/
.box {
  float: left;
  padding: 20px;
  box-shadow: 0 0 5px 1px inset #ccc;
  margin: 0 20px 20px 0;
}
.box h1 {
  font-size: 16px;
  margin-top: 0;
  font-family: verdana, cursive;
}
.box h1 span {
  font-size: 13px;
  font-family: monospace;
  font-weight: normal;
  float: right;
}

JavaScript

//#### Customization to achieve the dial funcationality ####//
$.fn.roundSlider.prototype.defaults.lap = 0;
var fn1 = $.fn.roundSlider.prototype._changeSliderValue;
$.fn.roundSlider.prototype._changeSliderValue = function (newValue, angle) {
  var o = this.options, startQuarter = o.max * 0.25, endQuarter = o.max * 0.75, preValue = o.value;
  if(preValue >= endQuarter && newValue <= startQuarter) this.options.lap++;
  if(preValue <= startQuarter && newValue >= endQuarter) this.options.lap--;

  if(this.options.lap < 0) this.options.lap = 0;
  else fn1.apply(this, arguments);
}
//#### ---------------------------- ####//

$("#dial1").roundSlider({
  editableTooltip: false,
  startAngle: 90,
  width: 0,
  handleSize: 20,

  max: 20,

  tooltipFormat: function (e) {
    var o = this.options;
    this.control.siblings("h1").find("span").html("Lap : " + o.lap);

    if(o.lap == 0) this.option("max", 20);
    else if(o.lap == 1) this.option("max", 80);
    else this.option("max", 100);

    var value;
    if(o.lap == 0) value = e.value;
    else if(o.lap == 1) value = 20 + e.value;
    else value = 100 + e.value;

    return value;
  }
});