Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

Given the HTML document. The task is to verify whether the input number is in the specified range or not while taking input a number from the user via the input element. If it is not then make it to lie within the range.

These are the two approaches:

Using the if-else condition

In this approach, we will use the if-else conditions to check whether the number lies inside the range or not. If the number is less than the min value then assign it with the max value. Otherwise, assign it with the min value. If the number is neither greater nor smaller than the min/max values then it must lie inside the range.

Example: The below code uses if-else conditions to limit the value of the entered number.

html




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <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">
    </p>
    <script>
        let up = document.
        getElementById('GFG_UP');
        let 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() {
            let input = document.
            getElementById('num');
            let 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:

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

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

Using the Math.min() and Math.max() methods

In this approach, we will use the Math.min() and Math.max() methods to limit theentered number.

Example: The below example illustrates the use of the Math.min() and Math.max() methods to limit the entered number.

html




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
</head>
 
<body>
    <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">
    </p>
    <script>
        const up = document.
        getElementById('GFG_UP');
        const 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() {
            const input = document.
            getElementById('num');
            let 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:

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

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



Last Updated : 28 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads