Skip to content

Instantly share code, notes, and snippets.

Last active January 13, 2022 22:59
What would you like to do?
Range input with v4

This is a demonstration of the use of the html 'range' input using d3.js v4.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

<!DOCTYPE html>
<meta charset="utf-8">
<title>Input test (circle)</title>
<label for="nRadius"
style="display: inline-block; width: 240px; text-align: right">
radius = <span id="nRadius-value">…</span>
<input type="range" min="1" max="150" id="nRadius">
<script src=""></script>
var width = 600;
var height = 300;
var holder ="body")
.attr("width", width)
.attr("height", height);
// draw the circle
.attr("cx", 300)
.attr("cy", 150)
.style("fill", "none")
.style("stroke", "blue")
.attr("r", 120);
// when the input range changes update the circle"#nRadius").on("input", function() {
// Initial starting radius of the circle
// update the elements
function update(nRadius) {
// adjust the text on the range slider"#nRadius-value").text(nRadius);"#nRadius").property("value", nRadius);
// update the rircle radius
.attr("r", nRadius);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment