Clamp

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

Implement clamp(value, lower, upper) to keep a number within an inclusive range. If the value is below the lower bound, return the lower bound; if above the upper bound, return the upper bound. This is a tiny but common utility for sliders, percentages, and animations. Concepts: numbers, math, boundaries, utilities.

Arguments

value: number — The number to clamp.
lower: number — The lower bound.
upper: number — The upper bound.

Returns

number —

The clamped number.

Examples

// Basic examples
clamp(3, 0, 5) // => 3
clamp(-10, -3, 5) // => -3
clamp(10, -5, 5) // => 5

// On the bounds (inclusive)
clamp(0, 0, 5) // => 0
clamp(5, 0, 5) // => 5

Solution

Overview

Clamp is a three-branch check that guarantees a value stays inside [lower, upper]. It is intentionally simple and predictable: values below the range snap to the lower bound, values above snap to the upper bound, and in-range values are returned unchanged. Key concepts: numbers, math, boundaries.

Approach 1: Branching (readable baseline)

Implementation:

If value < lower, return lower.
Else if value > upper, return upper.
Otherwise return value.

Complexity: O(1) time and O(1) space. This is safe for UI state, percentages, and animation progress values.

export default function clamp(value, lower, upper) {
  if (value < lower) return lower;
  if (value > upper) return upper;
  return value;
}

export default function clamp(value: number, lower: number, upper: number): number {
  if (value < lower) return lower;
  if (value > upper) return upper;
  return value;
}

Approach 2: Math chaining (compact)

Idea: clamp in a single expression — first push value up to the lower bound, then cap it at the upper bound.

We can write: Math.min(Math.max(value, lower), upper).

Read it as: *at least lower, at most upper.*

Why use it: short, idiomatic, and easy to scan once you're used to it.

export default function clamp(value, lower, upper) {
  return Math.min(Math.max(value, lower), upper);
}

export default function clamp(value: number, lower: number, upper: number): number {
  return Math.min(Math.max(value, lower), upper);
}

Notes & Pitfalls

Pitfalls

`lower` should be `<= upper`. If not guaranteed by caller, normalize or assert.
`NaN` inputs propagate through `Math.min/max` → result becomes `NaN`. Decide whether to coerce or throw.
Non-number inputs (strings, null) will be coerced if you use Math.*; prefer validating types for clarity.

Edge cases

value exactly equals `lower` or `upper` → return that bound.
Very large magnitudes: works, but be mindful of ±Infinity if it can appear.
Swapped bounds: if it can happen, you can fix with `[lower, upper] = lower <= upper ? [lower, upper] : [upper, lower]`.

Techniques

Guard + early return for clarity (Approach 1).
Common clamping pattern with `Math.min(Math.max(...))` (Approach 2).

Common mistakes on this challenge

Clamp should enforce inclusive lower/upper bounds
The value should pass through unchanged only when already inside the range.
- Apply lower bound first (`Math.max(value, min)`), then upper bound (`Math.min(..., max)`).
- Keep bounds inclusive so exact min/max values remain valid.
- Recheck below-range, above-range, and on-boundary examples.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse JavaScript interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open JavaScript mastery study plan Open Company Prep Open JavaScript Framework Prep Guide