This example uses a custom tween that interpolates the value
property.
forked from mbostock's block: Input Value Interpolation
license: gpl-3.0 |
This example uses a custom tween that interpolates the value
property.
forked from mbostock's block: Input Value Interpolation
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
padding: 40px; | |
} | |
input { | |
width: 880px; | |
} | |
</style> | |
<input type="range" value="0" min="0" max="255" step="any"> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
d3.select("input").transition() | |
.delay(1500) | |
.duration(7500) | |
.tween("value", valueTween(255)); | |
function valueTween(value) { | |
return function() { | |
var i = d3.interpolateNumber(this.value, value); | |
return function(t) { this.value = i(t); }; | |
}; | |
} | |
</script> |