Use Math.min and Math.max.

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

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

Use lodash's clamp method:

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

Needs no further explanation:

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

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.

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.

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

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

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.