Skip to content

Instantly share code, notes, and snippets.

@seemantk

seemantk/.block

Last active March 19, 2017 21:40
Show Gist options
  • Save seemantk/9bab95b23d9ddd0ebd6b3014dff9c6a3 to your computer and use it in GitHub Desktop.
Save seemantk/9bab95b23d9ddd0ebd6b3014dff9c6a3 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 Experimentations
Raw
.block
license: mit
Raw
index.html
<!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>
<body>
<div class="slider-toggle">
<input type="range" step="1" min="0" max="2" list="toggler"></input>
<datalist id="toggler">
</datalist>
<output for="toggler"></output>
</div><!--.slider-toggle-->
<footer>
<script>
// Utility
var identity = function(d) { return d; };
var indexity = function(d, i) { return i; };
// Build the 3-state toggler
var toggleStates = [ 'Off', 'On', 'Turbo' ];
var option = d3.select(".slider-toggle datalist").selectAll("option")
.data(toggleStates, identity)
;
option = option.enter()
.append("option")
.attr("value", indexity)
.text(identity)
.merge(option)
;
d3.select("input").on("change", function() {
var val = this.value;
d3.select("output").node().value = toggleStates[val];
})
;
</script>
</footer>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment