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

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.
<!DOCTYPE HTML><html>  <head>    <title>        Limit a number between a min/max value    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP">    </p>    Enter a Number:    <input id="num" />    <br>    <br>    <button onclick="GFG_Fun();">        click here    </button>    <p id="GFG_DOWN" style="color: green;">    </p>    <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;            }        }    </script></body>  </html>
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.
<!DOCTYPE HTML><html>  <head>    <title>        Limit a number between a min/max value    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP">    </p>    Enter a Number:    <input id="num" />    <br>    <br>    <button onclick="GFG_Fun();">        click here    </button>    <p id="GFG_DOWN" style="color: green;">    </p>    <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);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?