title: jQuery to animate changing value of input field
body: <p>I have the following jsfiddle: <a href="http://jsfiddle.net/60oa2zah/" rel="nofollow">http://jsfiddle.net/60oa2zah/</a></p>
  
  <pre><code>//Add Value to slider button
  $("[data-slider]")
      .each(function () {
          var input = $(this);
      })
          .bind("slider:ready slider:changed", function (event, data) {
              $(".dragger")
                  .html('&lt;span&gt;$' + addCommas(data.value.toFixed(0)) + '&lt;/span&gt;');
          });
  //Add thousands separator  
  function addCommas(nStr) {
      nStr += '';
      x = nStr.split('.');
      x1 = x[0];
      x2 = x.length &gt; 1 ? '.' + x[1] : '';
      var rgx = /(\d+)(\d{3})/;
      while (rgx.test(x1)) {
          x1 = x1.replace(rgx, '$1' + ',' + '$2');
      }
      return x1 + x2;
  }
  </code></pre>
  
  <p>When loading the page, I would like the slider to animate from a start value of $100 to an end value of $500. I've tried animating the value field, but haven't had any luck. Is there another way to accomplish this? On page load, the slider should appear to drag itself to $500.</p>
  
  <p>This is my attempt to animate the slider (doesn't work...)</p>
  
  <pre><code>//Drag from 100 to 500
  $(document).ready(function() {
  $("#Amount").val(
    $({countNum: 100}).animate({countNum: 500}, {
    duration: 3000,
    easing:'linear',
    step: function() {
      console.log(Math.floor(this.countNum));
    }
  }); ); 
  });
  </code></pre>