JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" id="num" value="100" />

JavaScript

window.onload = function() {
  function changeNum(input, typing) {
    var lower=-101, upper=100, x=parseInt(input.value), active=(input==document.activeElement);
    if ((typing && String(Math.abs(x)).length>2 && lower<x&&x<upper) || (!typing && lower<x&&x<upper)) {
      if (Math.abs(x-upper) < Math.abs(x-lower)) {input.value = (!active||typing?upper:lower);}
      else {input.value = (!active||typing?lower:upper);}
    }
  }
  document.getElementById("num").addEventListener("keyup",function(){changeNum(this,true);},false);
  document.getElementById("num").addEventListener("change",function(){changeNum(this,false);},false);
};