JSFiddle - React, Tailwind, and code Playground

by Chris Rebert

HTML

RED:out-of-range
<input type="number" min="2" max="5" value="1">
<br />
<input type="date" min="2010-10-10" max="2020-10-10" value="2005-10-10">
<br />
<input type="time" min="02:00:00" max="05:00:00" value="01:00:00">
<br />
<input type="range" min="2" max="5" value="1">
<hr /><!-- ----------- -->
<input type="number" min="1" max="5" value="2">
<br />
<input type="date" min="2005-10-10" max="2020-10-10" value="2010-10-10">
<br />
<input type="time" min="01:00:00" max="05:00:00" value="02:00:00">
<br />
<input type="range" min="1" max="5" value="2">

CSS

input {
  border: 2px solid black;
}
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
}
input:in-range {
  border: 2px solid lime;
}
input:out-of-range {
  border: 2px solid red;
}