Clamp numbers in JavaScript

DanielApril 10, 2023April 10, 2023

By clamp, we are referring to a way to restrict the value of a JavaScript number between two other numbers.

For example:

clamp(10, 50 /* min */, 100 /* max */) // returns 50
clamp(20, 1 /* min */, 15 /* max */) // returns 15
clamp(8, 4 /* min */, 12 /* max */) // returns 8

This means that when clamped, a number will:

• keep its own value if it fits in the range imposed by min and max
• take the value min if it is lower than it
• or take the max value if is higher than it.

Basically, we cap a number to a segment.

To implement a number clamping function in JavaScript we can mix the Math.min() and Math.max() functions:

/**
 * Returns a number whose value is limited to the given range.
 *
 * @param {Number} val The initial value
 * @param {Number} min The lower boundary
 * @param {Number} max The upper boundary
 * @returns {Number} A number in the range (min, max)
 */
const clamp = (val, min, max) => Math.min(Math.max(val, min), max)

clamp(-10, 20, 30) // returns 20
clamp(25, 20, 30)  // returns 25
clamp(500, 20, 30) // returns 30

If needed, one nice addition we can make to this function is to provide some default values for the min and max parameters:

const clamp = (val, min=1, max=10) => Math.min(Math.max(val, min), max)

clamp(5) // returns 5
clamp(-3) // returns 1

You can checkout this codepen for the full code example.

As a side note, we also have a clamp() function directly build into CSS.