Form Validation in JavaScript isn't giving me my expected result.

I have a form and event handler. I don't want the user to be able to type in numbers less than 1 or greater than 100. Currently, the min and max in my html code only limits the numbers while scrolling up or down, but they can still type in invalid numbers and not get any warning.

How can I prevent them from typing in numbers less than 1 or greater than 100. I don't have a submit button, and the examples I have seen online are most effective with a submit button. How can I work around this?

const figure = document.getElementById("figure");
figure.addEventListener("change", (event) => (default_figure = event.target.value));

<div class="col-md-12">
  <input type="number" id="figure" class="form-control " placeholder="Assign Class 
       Limit" min="1" max="100" />
</div>