title: Animating slider handle when altering the jQuery UI slider value option?
body: <p>I'm using the jQuery UI (1.8) slider widget to enable the user to slide/scroll a series of icons horizontally. Sometimes I want to move the slider programatically and the correct way to do that is by altering the option "value", like this:</p>
  
  <pre><code>$("#content-slider").slider("option", "value", 37);
  </code></pre>
  
  <p>The motion of the slider handle is instant though. I'd like the motion to be animated. This can be done on a lower level, by animating the "left" CSS property of the handle, like this:</p>
  
  <pre><code>$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450);
  </code></pre>
  
  <p>...but if I do this, I just set the left property of the CSS for the handle. The actual value of the slider is not affected. So I thought of adding a callback at the end of the animation where the value is set, something like this:</p>
  
  <pre><code>$(".ui-slider-handle").animate({ left: position, easing: 'swing' }, 450, function() {
      // Callback - set the new slider value
      $("#content-slider").slider("option", "value", position);
  });
  </code></pre>
  
  <p>When I try the code above (with the callback) I get a jQuery error about too much recursion, so I think that this is not a good way to accomplish what I want (ugly code).</p>
  
  <p><strong>Is there a better way to animate the slider handle when the value of the slider is altered programatically?</strong></p>
  
  <p>Thanks in advance!
  /Thomas Kahn</p>