JSFiddle - React, Tailwind, and code Playground

by Dimitri Anoudis

HTML

<div>
  <h4>number field that supports 2 decimal places</h4>
  <input type="number" step="0.01" value="0.00" placeholder="0.00" />
</div>

<div>
  <h4>a range field that goes from 3 to 15</h4>
  3<input id="inputRange" type="range" min="3" max="15" value="" />15
  <p id="result"></p>
</div>

<div>
  <h4>a telephone number field that validates the telephone number</h4>
  <input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>
</div>

JavaScript

var p = document.getElementById("inputRange"),
    res = document.getElementById("result");

p.addEventListener("input", function() {
    res.innerHTML = p.value;
}, false);