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

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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.