Number only input box with range restriction

As I mentioned in the comments earlier... there isn't anything that is HTML only here (you'd think there should be). But... since you did include Javascript and jQuery in your question, I'll propose this simple and light solution.

Assuming this HTML...

<form>
  <input type="number" min="3" max="7" step="0.5"></input>
</form>

Then we can use this script to handle our requirements.

$( document ).ready(function() {
    $('input').change(function() {
      var n = $('input').val();
      if (n < 3)
        $('input').val(3);
      if (n > 7)
        $('input').val(7);
    });
});

Basically, after the change event fires, we do a quick check to make sure the values are within the guidelines, and if not, force them back within range.

Here's a simple solution for checking that an input is an integer number contained in a given range using the HTML5 constraint validation API that is supported by most browsers:

<label for="n">Enter integer number 1&le;n&le;10</label>
<input type="number" min="1" max="10" step="1" id="n" oninput="(validity.valid)||(value='');">

To validate and auto-correct the input depending on validity states rangeOverflow, rangeUnderflow, stepMismatch:

<label for="numberSize">Enter integral number 1&le;n&le;10</label>
<input type="number" min="1" max="10" id="numberSize" oninput="(!validity.rangeOverflow||(value=10)) && (!validity.rangeUnderflow||(value=1)) &&
(!validity.stepMismatch||(value=parseInt(this.value)));">

This will send

• all inputs >max to max
• inputs < min to min

and truncate decimal values.

<input type="number" min="3" max="7" step="0.01"></input>

step helps restrict the minimum number granularity.