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 it's lower than 1, and 20 if it's higher than 20

How can I do this in javascript, without having to write multiple if statements and stuff like that? Thanks.

Answer 1

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 2

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 3

Use lodash's clamp method:

_.clamp(22, 1, 20) // Outputs 20

Answer 4

Needs no further explanation:

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

Answer 5

Quote from this answer:

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 6

One Liners

const clamp = (num, min, max) => num > max ? max : num < min ? min : num

const minmax = (num, min, max) => Math.min(Math.max(num, min), max)

Benchmark

Browser	clamp()	minmax()	Result
Chrome	976,066,844 ops/s	971,704,488 ops/s	clamp() 0.45% faster
Firefox	872,108,437 ops/s	1,358,476,166 ops/s	minmax() 35.8% faster
Edge	958,554,747 ops/s	936,113,887 ops/s	clamp() 2.34% faster

JsBench https://jsbench.me/qhl99e1thl/1

In case of firefox minmax() is much faster in compare to others. Though in chrome and Edge clamp() is faster than minmax() but difference is ignorable. So, my opinion is to use minmax() according to the benchmark.

Answer 7

Use Math.min and Math.max.

Answer 8

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 9

You could easily just extend Math by adding your own method...

ES6

Math.minmax = (value, min, max) => Math.min(Math.max(value, min), max);

ES5

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