const Input = () => {
  const range = { min: 5, max: 50 }
  const [value, setValue] = useState<number | "">(range.min)

  function onBlurHandle(value: number) {
    if (value >= range.min && value < range.max) return;
    setValue(range.min)
  }

  return (
    <input
      type="number"
      value={value}
      onChange={({ target }) => setValue(target.value === "" ? "" : +target.value)}
      onBlur={({ target }) => onBlurHandle(+target.value)}
      min={range.min}
      max={range.max}
    />
  )
}