How to limit a number between a min/max value in JavaScript ?

• Last Updated : 19 Feb, 2020

Given the HTML document. The task is, while taking input a number from the user via input element, verify that the number is in the specified range. If it is not then changing it to within the range. Here 2 approaches are discussed with the help of JavaScript.
Approach 1:

• Take the input from the input element and convert it to number using Number() method.
• Use IF-ELSE Condition to verify if it is in range or not?
• If the number is less than the minimum value then give it the minimum value else if.
• If the number is greater than the maximum value then give it the maximum value else the number is in the range itself.

Example 1: This example implements the above approach.

 ```<``html``>`` ` `<``head``>``    ``<``title``>``        ``Limit a number between a min/max value``    ````    ``<``script` `src``=``"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"``>``    `````` ` `<``body` `style``=``"text-align:center;"``>``    ``<``h1` `style``=``"color:green;"``>  ``            ``GeeksForGeeks  ``        ````    ``<``p` `id``=``"GFG_UP"``>``    ````    ``Enter a Number:``    ``<``input` `id``=``"num"` `/>``    ``<``br``>``    ``<``br``>``    ``<``button` `onclick``=``"GFG_Fun();"``>``        ``click here``    ````    ``<``p` `id``=``"GFG_DOWN"` `style``=``"color: green;"``>``    ````    ``<``script``>``        ``var up = document.getElementById('GFG_UP');``        ``var down = document.getElementById('GFG_DOWN');``        ``up.innerHTML = ``          ``"Click on the button to check if the types number"+``          ``" is in range or not.<``br``>Min Value - 0 <``br``> Max Value - 100";`` ` `        ``function GFG_Fun() {``            ``var input = document.getElementById('num');``            ``var n = input.value;``            ``n = Number(n);``            ``if (n < ``0``) {``                ``\$('#GFG_DOWN').html('Type number between 0-100');``                ``input.value` `= ``0``;``            ``} else if (n > 100) {``                ``\$('#GFG_DOWN').html('Type number between 0-100');``                ``input.value = 100;``            ``} else {``                ``\$('#GFG_DOWN').html('You typed the valid Number.');``                ``input.value = n;``            ``}``        ``}``    `````` ` ``

Output:

• Before clicking on the button:

• After clicking on the button:

Approach 2:

• Take the input from the input element and convert it to number using Number() method.
• Use Math.max and Math.min method to verify if it is in range or not?
• If the number is less than the minimum value then give it the minimum value else if.
• If the number is greater than the maximum value then give it the maximum value else the number is in the range itself.

Example 2: This example implements the above approach.

 ```<``html``>`` ` `<``head``>``    ``<``title``>``        ``Limit a number between a min/max value``    ````    ``<``script` `src``=``"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"``>``    `````` ` `<``body` `style``=``"text-align:center;"``>``    ``<``h1` `style``=``"color:green;"``>  ``            ``GeeksForGeeks  ``        ````    ``<``p` `id``=``"GFG_UP"``>``    ````    ``Enter a Number:``    ``<``input` `id``=``"num"` `/>``    ``<``br``>``    ``<``br``>``    ``<``button` `onclick``=``"GFG_Fun();"``>``        ``click here``    ````    ``<``p` `id``=``"GFG_DOWN"` `style``=``"color: green;"``>``    ````    ``<``script``>``        ``var up = document.getElementById('GFG_UP');``        ``var down = document.getElementById('GFG_DOWN');``        ``up.innerHTML = ``          ``"Click on the button to check if the types number "+``       ``"is in range or not.<``br``>Min Value - 0 <``br``> Max Value - 100";`` ` `        ``function GFG_Fun() {``            ``var input = document.getElementById('num');``            ``var n = input.value;``            ``n = Number(n);``            ``n = Math.min(100, Math.max(0, n));``            ``\$('#GFG_DOWN').html('Number ranged to <``br``>N = ' + n);``        ``}``    `````` ` ``

Output:

• Before clicking on the button:
• After clicking on the button:

My Personal Notes arrow_drop_up