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.

Solution 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")   )
)

Solution 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);

Solution 3

Use lodash's clamp method:

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

Solution 4

Needs no further explanation:

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

Solution 5

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.

View more solutions

Comments

[Harry Joy]

do Javascript has as intval(num) function. Cause I know only parseInt(num)?

[Govind Malviya]

I dont know about php sorry I edited that I consider it as User defined function

[Harry Joy]

Now our answers are identical so I'm deleting mine.

[Govind Malviya]

thanks Joy for telling me about intval in php. and thanks for providing chance to me..

[Oriol]

Don't use parseInt unless you know what you are doing, e.g. parseInt(1e300) === 1. Just use Math.min(Math.max(number, 1), 20).

[Sandwich]

Isn't this backwards? As written, the number is maximum 1, and minimum 20, no?

[Константин Ван]

@Sandwich Let's pay attention to Math.max(number, 1). It's the maximum value among number and 1. So it's number when number > 1, and it's 1 when number <= 1. i.e. it is always greater than or equals to 1, no matter what number is, as long as number is numeric(Math.max can return NaN when number is not numeric.); the Math.max sets the minimum limit to 1. And the Math.min sets the maximum limit to 20 in the same way.

[Константин Ван]

@Sandwich Remember, Math.min and Math.max are not Math.setMinimumLimit and Math.setMaximumLimit. Don't be confused.

[Leonardo Raele]

That's what I was looking for. Thank you

[Ryan Stone]

Would this work for negative numbers aswell such as transform -xdeg?

[Neuron]

@RyanStone what do you mean by "transform -xdeg"? It does work for negative values as well, yes. You can call clamp(-5, -1, 1) and it will return -1.

[Ryan Stone]

was meaning to use it in Css Transform:rotateX(); which takes in negative values.. Via Javascript