HTML5 Experimentations

<!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>

<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>

https://d3js.org/d3.v4.min.js