linked

<!DOCTYPE html>
<meta charset="utf-8">
<title>Linked</title>

<div id=viz style="margin-top: 0px;">Linked Sliders</div>

<div id="valueSlider" style="margin:0px; color: #17b424; font-size:20px;">
  <p>
  <label for="sliderValue"
         style="display: inline-block; width: 100px; text-align: right; padding-top: 0px">
         slider value = <span id="slider-value">…</span>
  </label>
  <input type="range" min="0" max="150" id="sliderValue">
  <input type="number" min="0" max="150" id="inputVal">
  </p>
</div>

var sliderExtent = [0, 100];
var sValue;

// var range = d3.select("#sliderValue")
// 	.attr("range", sliderExtent)
// 	.property("value", sValue);
var number = d3.select("#inputVal")
	.attr("number", sliderExtent)
	.property("value", sValue);

d3.select("#sliderValue").on("input", function() {
  updateSlider(+this.value);
});
d3.select("#inputVal").on("input", function() {
  updateSlider(+this.value);
});

updateSlider(40);

function updateSlider(sValue) {
  d3.select("#slider-value").text(sValue);
  d3.select("#sliderValue").property("value", sValue)
  d3.select("#inputVal").property("value", sValue);
}
</script>

https://d3js.org/d3.v4.min.js