Search code examples
javascriptjquerycssd3.jsuser-input

Automating a input slider over time

I have a range input on my website like this:

<input type="range"  min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/>

I have some D3 code that loads a visualization onto the page. It's online here:

https://bl.ocks.org/KingOfCramers/raw/5c166e770c4a865d861452dd184b54f4/

Over the period of 10 seconds, I want to automate the value of the slider from it's min value to it's max value. The thumb slider should move accordingly.

I need this function (probably setTimeout?) to fire after the visualization has finished loading my D3 code (which is currently wrapped in a d3.queue function), and allow for the user to move the slider after it's reached the max value.

How would I do this in Javascript?

Solution

  • Over the period of 10 seconds, I want to automate the value of the slider from it's min value to it's max value. The thumb slider should move accordingly

    If you want a d3 way to do this, you can transition the slider with a d3 transition:

    d3.select("#slider")
  .transition()
  .attr("value",maxValue)
  .duration(time); // in ms

    This simple implementation is shown below. If you want it execute after the visualization draws, place the transition at the end of your queue ready function.

    d3.select("#slider")
  .transition()
  .attr("value",1510462800000)
  .duration(10000);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>


<input type="range"  min="1036000000000" max="1510462800000" value="1036000000000" class="slider" id ="slider"/>

    The default easing is cubic in/out, which is shown above. If you want to change the easing, you can use d3.ease, this next snippet shows linear easing:

    d3.select("#slider")
  .transition()
  .attr("value",1510462800000)
  .ease(d3.easeLinear)
  .duration(10000);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>


<input type="range"  min="1036000000000" max="1510462800000" value="1036000000000" class="slider" id ="slider"/>

    You can update the value of another element as well with a slight modification, use the transition attrTween method to access the current value of the slider as it is being updated (you might want to format the number). This approach also lets you update your visualization as you transition the slider fairly easily:

    d3.select("#slider")
  .transition()
  .attrTween("value",function() {
     return function(t) {
      var i = d3.interpolate(1036000000000, 1510462800000);
      d3.select("#text").html(i(t));
      d3.select("#input").attr("value",i(t));
      return i(t);
     }
  })
  .duration(1000);
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>


<input type="range"  min="1036000000000" max="1510462800000" value="1036000000000" class="slider" id ="slider"/>

<p id="text"> </p>
<input type="text" id="input" value="0"/>