Pauline Pauline - 1 year ago 174
Javascript Question

Moving the handle of a d3.js slider

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

var mySlider ="#slider")
.on("slide", function (evt, 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: //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
to position
) so the visualisation updates by itself with no user interaction.

Answer Source

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

<!DOCTYPE html>

  <script data-require="d3@3.5.17" data-semver="3.5.17" src=""></script>
  <link rel="stylesheet" href="" />
  <script src=""></script>

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download