D3 Examples - 16 - Using a range input with D3.js

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
 
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<title> Input test (circle) </title>
<p>
  <label for="nRadius"
         style="display: inline-block; width: 240px; text-align: right">
    radius = <span id="nRadius-value">...</span>
  </label>
  <input type="range" min="1" max="150" id="nRadius">
</p>
​
<script>
  var width = 600;
  var height = 300;
  
  var holder = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);
  
  //Draw the circle
  holder.append("circle")
  .attr("cx", 300)
  .attr("cy", 150)
  .style("fill", "none")
  .style("stroke", "blue")
  .attr("r", 120);
  
  //When the input range changes update the circle
  d3.select("#nRadius").on("input", function() {
    update(+this.value);
  });
  
  //Initial start value
  update(120);
  
  //Update the elements
  function update(nRadius) {
    
    //Adjust the text of the range slicer
    d3.select("#nRadius-value").text(nRadius);
    d3.select("#nRadius").property("value", nRadius);
    
    //Update the circle Radius
    holder.selectAll("circle")
    .attr("r", nRadius);
  }
  
</script>
    