D3 Examples - linked slider-input test

linked slider-input test
This is a d3 step slider inspired by Mike Bostock's d3 Slider (https://bl.ocks.org/mbostock/6452972). This instance has an addition of a "STEP" value that makes it work just like a jQuery slider initiated with a step value. Change the step to either null or 0 to get the drag value as is!
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Linked Input Test</title>
<h1>Linked Sliders</h1>
<div id=viz style="margin-top: 50px;"></div>
<p>
  <label for="nHeight"
         style="display: inline-block; width: 240px; text-align: right; padding-top: 10px">
         $ amount = <span id="nHeight-value">…</span>
  </label>
  <input type="range" min="1" max="100" id="nHeight">
</p>
<p>
  <label for="nWidth"
         style="display: inline-block; width: 240px; text-align: right; padding-bottom: 20px">
         % of range extent = <span id="nWidth-value">…</span>
  </label>
  <input type="range" min="0" max="100" id="nWidth">
</p>
​
<div id="valueSlider" style="margin:30px; color: #17b424; font-size:20px;">linked range
  <p>
  <label for="sliderValue"
         style="display: inline-block; width: 200px; text-align: right; padding-top: 10px">
         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>
​
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
​
// viz pixel footprint
var extent = [0, 100];
var height = 60;
var width = 500;
​
// horizontal bar slider
var holder = d3.select("#viz")
  .append("svg")
  .attr("width", width)
    .attr("height", height);
​
// draw a rectangle
holder.append("rect")
    .style("fill", "cornflowerblue")
    .style("stroke", "red")
    .attr("height", height)
    .attr("width", width + height)
    .attr("x", width + height)
    .attr("y", height);
​
// read a change in the height input
d3.select("#nHeight").on("input", function() {
//  updateHeight(+this.value)
  updateWidth(+this.value);
});
​
// read a change in the width input
d3.select("#nWidth").on("input", function() {
  updateWidth(+this.value);
});
​
// update the values
updateHeight(+this.width);
updateWidth(100);
​
// Update the height attributes
function updateHeight(nHeight) {
    var sum = width + height;
  // adjust the text on the range slider
  d3.select("#nHeight-value").text(nHeight);
  d3.select("#nHeight").property("value", nHeight);
​
  // update the rectangle height
  holder.selectAll("rect")
    .attr("y", 50-(nHeight/2))
    .attr("height", nHeight);
}
​
// Update the width attributes
function updateWidth(nWidth) {
​
  // adjust the text on the range slider
  d3.select("#nWidth-value").text(nWidth);
  d3.select("#nWidth").property("value", nWidth);
​
  // update the rectangle width
  holder.selectAll("rect")
    .attr("x", 300-(nWidth/2))
    .attr("width", nWidth);
}
​
var sliderExtent = [0, 100];
// var numExtent = [0, 100];
var sValue;
​
var range = d3.select("#sliderValue")
    .attr("range", sliderExtent)
    .property("value", sValue);
​
var number = d3.select("#inputVal")
    .attr("number", sliderExtent)
//  .attr("range", 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>
​
    