Pauline Pauline - 1 month ago 24
Javascript Question

Moving the handle of a d3.js slider

I am using this slider for a visualisation with d3.js

var mySlider = d3.select("#slider")
.call(d3.slider()
.axis(true)
.min(0)
.max(50)
.step(1)
.on("slide", function (evt, value) {
updateViz(value))
}));


The slider works very well on drag, however I can't find out a way to move it using javascript. What I am trying to do is something like:

d3.select(mySlider) //select my slider (or its handle)
.moveHandle(6) //moves the handle of my slider to position(6)


The reason why I am looking for that is that I would like to add timed events where the slider moves by itself (from position
i
to position
i+1
) so the visualisation updates by itself with no user interaction.

Answer

Keep a reference to your slider and call .value(i):

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://d3js.org/d3.v3.min.js"></script>
  <link rel="stylesheet" href="https://rawgit.com/MasterMaps/d3-slider/master/d3.slider.css" />
  <script src="https://rawgit.com/MasterMaps/d3-slider/master/d3.slider.js"></script>
</head>

<body>
  <div id="slider"></div>
  <script>
    var slider = d3.slider().value(50);
    d3.select('#slider').call(slider);
    setInterval(function() {
      slider.value(Math.random() * 100)
    }, 500);
  </script>
</body>

</html>