jquery knob

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>


<div class="demo">

  <input class="dial-step1" data-angleOffset=0 data-linecap=round value="35">
</div>

CSS

p {
  font-size: 30px;
  line-height: 30px
}

div.demo {
  text-align: center;
  width: 280px;
  float: left
}

.dial-step1.knob {
  color: red;
}

JavaScript

jQuery(document).ready(function() {

  $(".dial-step1").knob({
    format: function(value) {
      if (value == undefined || isNaN(value)) {
        value = 0;
      }
      return value + '%';
    },
    parse: function(value) {
      var v = value.toString();

      if (v.substring(0, 1) == '%') {
        v = v.substring(1);
      }

      return parseFloat(v);
    }
  });
});