title: How to change knob value dynamically in jquery..?
body: <p>I have applied a jquery knob with readonly feature as follows :</p>
  
  <pre><code>&lt;style&gt;
  .test{
      background: #292929;
      margin:50px;
  }
  &lt;/style&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  
  &lt;input type="text" value="45%" class="dial"&gt;&lt;button id="change"&gt;Change&lt;/button&gt;
  &lt;/body&gt;
  &lt;script&gt;
  $(".dial").knob({
      readOnly: true,
      fgColor: "#00ABC6",
      bgColor: "#666666",
      thickness: 0.2
                  });
  
  $(document.body).on('click', 'button#change', function(){
      $("input.dial").val('80%');
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>Now when i click on change button it only changes the value of input tag but failed to change the percentage on knob filled area.</p>