title: Surrounding an input element with a jQuery Knob Dial
body: <p>The following code snippet converts an <code>&lt;input&gt;</code> element into a <a href="https://github.com/aterrien/jQuery-Knob" rel="nofollow noreferrer">jQuery-knob</a> dial:</p>
  
  <pre><code>&lt;input type="text" value="12" class="dial"&gt;
  
  &lt;script&gt;
      $(function() {
          $(".dial").knob();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>It looks as follows:</p>
  
  <p><img src="https://i.stack.imgur.com/HWLmL.png" alt="enter image description here"></p>
  
  <p><strong>Problem:</strong> I'd like to use the input bar within the jQuery knob (shown with a <code>12</code> in it above) as a normal input bar (i.e., users should be able to type normal text in it).  Then, I'd like to programmatically adjust the knob value from elsewhere using javascript.  Is there a way to do this?</p>