d3.js selection not working

Question

In this JSFiddle , both inputs (textbox and slider) are bound to each other. When the slider is dragged it perfectly updated the textbox. However, when textbox value is manually changed it does not update slider position. After any manual change to the text box, the slider no longer updates the textbox when dragged. Please help me find out the cause of this behaviour.

HTML

<input id="textbox" type="number">
<input id="slider" type="range" min="0" max="1000">

JS

d3.select("#textbox").on("input", function() {
   // the following line is not updating slider position
   d3.select("#slider").attr("value", this.value);

   // when the following lines are un-commented it works perfectly
   // var s = document.getElementById("slider");
   // s.value = this.value;
});

d3.select("#slider").on("input", function() {
  d3.select("#textbox").attr("value", this.value);
});

Answer 1

Using HTML slider (and not d3-slider which is another option), the "value" attribute only set the initial value !

To set dynamically use the property

d3.select("#slider").property("value", this.value);

see updated fiddle

Answer 2

Try using 'slide' event for slider, instead of 'input'.

You might want also to check examples here .