CODEWITHSUNDEEP
javascripthtmldomd3.js
Khalid Amin
Khalid Amin

Reputation: 902

d3.js selection not working

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);
});

Upvotes: 1

Views: 968

Answers (2)

pltrdy
pltrdy

Reputation: 2109

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

Upvotes: 3

zencodism
zencodism

Reputation: 442

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

You might want also to check examples here.

Upvotes: 0

Related Questions