Input tag validation

I have just an input tag with the following logic:

https://codepen.io/ion-ciorba/pen/MWVWpmR

I have a minimum value coming from the database(400 in this case), the logic is good but the user interaction with the component is really bad, the user can’t input a value that is below 400, I want something else that won’t block the user from typing, maybe some other type of interaction besides change and input. How can I make this interaction more user friendly, but still maintain the minimum value at 400.

Maybe a better solution for that:

if (numberInputValue == "" || parseInt(numberInputValue) < parseInt(min)) {
numberInputValue = min;
} else if (parseInt(numberInputValue) > parseInt(max)) {
numberInputValue = max;
}

Answer

I agree with @Twisty the jQuery UI Slider would be better suited

$(function() {
  let slider = $(".tbi-slider")[0];
  let loanAmount = $(".tbi-calc-loanAmount");
  let totalLoanAmount = $(".tbi-calc-loanTotalAmount");
  var min = $(".tbi-slider").attr("min");
  var max = $(".tbi-slider").attr("max");
  $("#co-tbi-loanAmount-input").change(function(s) {
    var numberInputValue = s.target.value;
    if (numberInputValue.match(/^[0-9]+$/) == null) {
      $("#co-tbi-loanAmount-input").val(min);
    }
    slider.value = parseInt(numberInputValue);
    if (parseInt(numberInputValue) < parseInt(min)) {
      $("#co-tbi-loanAmount-input").val(min);
    } else if (parseInt(numberInputValue) > parseInt(max)) {
      $("#co-tbi-loanAmount-input").val(max);
    }
    if (
      parseInt(numberInputValue) >= parseInt(min) &&
      parseInt(numberInputValue) <= parseInt(max)
    ) {
      $("#co-tbi-loanAmount-input").val(numberInputValue);
    }
    $("#tbi-range-slider").slider("value", $(this).val());
  });

  $("#tbi-range-slider").slider({
    min: 400,
    max: 1000,
    orientation: "horizontal",
    range: "min",

    slide: function(event, ui) {
      refreshSwatch(),
        $("#co-tbi-loanAmount-input").val(ui.value);
    },

  });
});

function refreshSwatch() {
  $("#tbi-range-slider").css("background-color", "#729fcf");
}

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

#tbi-range-slider {
  display: inline-block;
  width: 300px;
  margin: 15px;
  background-image: none;
}

#tbi-range-slider .ui-slider-range {
  background: #ef2929;
}

<input id="co-tbi-loanAmount-input" class="tbi-calc-loanAmount co-tbi-input tbi-font-18" value="400">


<div class="tbi-slider" id="tbi-range-slider" min="400" max="1000" value="500"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

I hope this helps