create HTML5 input type nodes using d3.js

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Multiple Bar Charts showcasing various scale methods and data offset-ing technique</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/gerhobbelt/d3/d3.latest.js"></script>
    
  <style>
circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

body, p {
  font: 12px sans-serif;
}

text {
  font: 10px sans-serif;
}
  </style>
  </head>
  <body>
  <p>The list of HTML5 input types (+ sample for each, as created by D3.JS):</p>

<p>Plus a lone 'input type=range' one:</p>
  <!--
    Safari 5 has a bug: this <input> renders correctly, while the D3-generated one at
    the end has the slider positioned at the default value '50' despite 'value="0"'
    being set and visible with 'inspect element'.  :-(

var input_types = [
  'color',
  'date',
  'datetime',
  'datetime-local',
  'email',
  'month',
  'number',
  'range',
  'search',
  'tel',
  'time',
  'url',
  'week'
];

// create the UL list of types, id-ing each <LI> so we can then d3.select those later for the real test
var ul = d3.select("ul#input-types") // this one exists, and is to be parent of...
    .selectAll('li')       // ... these, which don't exist yet, but will once ...
      .data(input_types)     // ... data[] is used to determine how many there must be ...
      .enter()                 // ... and we pick the set of 'not-yet-existing' elements corresponding
        .append('li');     // ... to one(1) data[i] item each

ul.attr('id', function(d) {
      return 'inp-item-' + d;
    })
    .append('p')
      .text(function(d) {
        return 'type="' + d + '"';
      });
  ul.append('input')
    .attr('type', String);      // implicit   function(d, i) { return ''+d; }

/*
    <input type="range" name="lone-ranger" min="0" max="1000" value="0" onchange="... show value ..." style="width: 800px;">

first 4 lines have same effect as these (in this context, as data[] isn't used anywhere, really):

d3.select('body')
        .append('input')
          .attr('type', 'range')
*/
d3.select('body')
  .data(['range'])
    .append('input')
      .attr('type', String)      // implicit   function(d, i) { return ''+d; }
      .attr('name', 'lone-ranger')
      .attr('value', 400)
      .attr('min', 0)
      .attr('max', 1000)
      .attr('style', 'width: 800px;')
      .on('change', function(d, i) {
        // 'this' is the node itself
        var pa = d3.select(this.parentNode);
        var ranger_value = +this.value; // identical to    +d3.select(this).node().value

// only create node when it's not there yet:
        var pn = pa.selectAll('p#display-value')
            /*
          .data([ranger_value])   // when you don't use data(), you can't .enter().append() !
          .enter()
            */
          .enter();
            pn.each(function(d, i) {
              var sel = d3.select(this);
              if (!d)
              {
                sel.append('span')
                  .attr('id', 'display-value');
              }
            });

// always update the value shown:
        pn = pa.select('span#display-value');

pn.text(function() {
            return 'value = ' + ranger_value;
          });
      });

</script>

</body>
</html>

Updated missing url https://raw.github.com/GerHobbelt/d3/master/d3.latest.js to https://cdn.jsdelivr.net/gh/gerhobbelt/d3/d3.latest.js

https://raw.github.com/GerHobbelt/d3/master/d3.latest.js