How can I use JavaScript to limit a number between a min/max value?

Question

I want to limit a number between two values, I know that in PHP you can do this:

$number = min(max(intval($number), 1), 20);
// this will make $number 1 if i         


        

Answer 1

You have at least two options:

You can use a pair of conditional operators (? :):

number = number > 100 ? 100 : number < 0 ? 0 : number;

Or you can combine Math.max and Math.min:

number = Math.min(100, Math.max(0, number));

In both cases, it's relatively easy to confuse yourself, so you might consider having a utility function if you do this in multiple places:

function clamp(val, min, max) {
    return val > max ? max : val < min ? min : val;
}

Then:

number = clamp(number, 0, 100);

Answer 2

Related: What's the most elegant way to cap a number to a segment?:

Update for ECMAScript 2017:

Math.clamp(x, lower, upper)

But note that as of today, it's a Stage 1 proposal. Until it gets widely supported, you can use a polyfill.

Answer 3

I will share my robust function to enforce whole numbers (because of the integer tag), it has features like optional min/max parameters and -0 protection:

function toInt(val, min, max){
    val=(val*1 || 0);
    val=(val<0 ? Math.ceil(val) : Math.floor(val));

    min*=1;
    max*=1;

    min=((Number.isNaN(min) ? -Infinity : min) || 0);
    max=((Number.isNaN(max) ? Infinity : max) || 0);

    return Math.min(Math.max(val, min), max);
}

Some quick notes:

• The (... || 0) behind the scenes is dealing with -0 to change it to 0, which is almost always what you want.
• The min and max parameters are optional. When blank or invalid values are passed, they will turn into -Infinity and Infinity so they silently don't interfere with Math.min() and Math.max().
• You can change Number.isNaN(x) ECMAScript-6 to x!==x (results in true only for NaN) for more compatibility with really old browsers, but this is simply not necessarily anymore.

Answer 4

Use Math.min and Math.max.

Answer 5

like this

var number = Math.min(Math.max(parseInt(number), 1), 20);

Live Demo:

function limitNumberWithinRange(num, min, max){
  const MIN = min || 1;
  const MAX = max || 20;
  const parsed = parseInt(num)
  return Math.min(Math.max(parsed, MIN), MAX)
}

alert(
  limitNumberWithinRange(  prompt("enter a number")   )
)

Answer 6

Needs no further explanation:

function clamp(value, min, max) {
    return Math.min(Math.max(value, min), max);
}