title: How can I update a form input type=Range with my transition's progress?
body: <p>I would like to show the progress of my transition animation using a range input field but I do not know of an event that fires every time the attributes/styles change that I can listen to to update my range input's value continuously.  I know there is each("end", ...) and each("start", ...) but those only fire ones.  I want to have something fire every part of the transition (I believe this is referred to as <em>t</em> in d3.js).  I tried updating the "value" attribute of the range input as part of the animation, but that does not work (I see the value update in the HTML, but the slider does not slide)</p>
  
  <pre><code>circle
      .attr('cx', xScale(0))
      .attr('value',0)
    .transition()
      .duration(anim_duration)
      .ease(ease)
      .attr('cx', xScale(1))
      .attr('value',100)  &lt;-- Does not work
  </code></pre>
  
  <p>And, on my range Input field:</p>
  
  <pre><code>range
      .attr('value',0)
    .transition()
      .duration(anim_duration)
      .ease('linear')
      .attr('value',100)  &lt;-- Does not work
  </code></pre>
  
  <p>Furthermore I would like to use the range input then to go back and forward in my animation.  Basically the range finder is like the progress indicator on a movie that you can use to control the d3.js "movie".</p>
  
  <p><a href="http://jsfiddle.net/AXAtq/" rel="nofollow">Here's what I got so far</a></p>
  
  <p>Thanks.</p>