min, max, and step Range Validation

Technical Deep Dive & Specifications

2.1 The Step-Base Calculation Algorithm

According to the WHATWG HTML Standard (§ 4.10.5.3.8 "The step attribute"), an input value is valid with respect to step if and only if:

$$\text{Value is a valid step} \iff (\text{value} - \text{stepBase}) \pmod{\text{step}} = 0$$

What is stepBase?

• If the element has a min attribute, $\text{stepBase} = \text{min}$.
• If the element has no min attribute, but has a value attribute default, $\text{stepBase} = \text{defaultValue}$.
• Otherwise, $\text{stepBase} = \text{defaultStepBase}$ (which is 0 for numbers).

Example: <input type="number" min="10" max="50" step="10">
• Valid values: 10, 20, 30, 40, 50
• Invalid values: 15 (stepMismatch), 5 (rangeUnderflow), 60 (rangeOverflow)

Example: <input type="number" min="3" max="23" step="5">
• Valid values: 3, 8, 13, 18, 23 (Notice: 5, 10, 15 are INVALID because base is 3!)

2.2 The step="any" Escape Hatch

By default, <input type="number"> has an implicit step="1". If a user enters 4.25, the browser rejects the input with a stepMismatch error!

To allow arbitrary decimal values (such as currency fractions, latitude/longitude, or physics measurements) while still retaining min and max constraints, use step="any":

<!-- Allows ANY floating-point number between 0.0 and 100.0 -->
<input type="number" min="0" max="100" step="any">

2.3 Constraint Validation Flags

The Constraint Validation API exposes three specific boolean flags on element.validity for range checking:

+----------------------------------------------------------------------------------------------------+
|                                    RANGE VALIDITY FLAGS MATRIX                                     |
+----------------------------------------------------------------------------------------------------+

 FLAG                  TRIGGER CONDITION                              HTML ATTRIBUTE
 ───────────────────────────────────────────────────────────────────────────────────────────────────
 validity.rangeUnderflow   Parsed value is strictly less than min       min="value"
 validity.rangeOverflow    Parsed value is strictly greater than max    max="value"
 validity.stepMismatch     (value - stepBase) is not a multiple of step step="value"

2.4 Temporal Input Boundaries (date, time, datetime-local)

Range validation is not limited to integers and floats. Temporal inputs use ISO 8601 strings:

💻 Interactive Code Playground

Starter Code

The following financial transaction dashboard demonstrates min, max, and step across currency amounts, transaction dates, and appointment booking time slots.

Line-by-Line Code Breakdown

• Lines 82-90 (min="10.00" max="10000.00" step="0.01"): Restricts numeric input to financial amounts. Entering 9.99 triggers rangeUnderflow, entering 10000.01 triggers rangeOverflow, and entering 50.123 triggers stepMismatch.
• Lines 97-105 (<input type="date" min="2026-07-01" max="2026-12-31">): Enforces date boundaries using ISO-8601 strings (YYYY-MM-DD).
• Lines 111-119 (<input type="time" min="09:00" max="17:00" step="900">): Sets a time window between 9 AM and 5 PM. step="900" enforces 15-minute granularity (900 seconds). Entering 09:07 triggers stepMismatch.
• Lines 141-150 (v.rangeUnderflow, v.rangeOverflow, v.stepMismatch): Inspects all three individual flags from the validity object.

Expected Browser Render Output

+---------------------------------------------------------------+
| Treasury Transfer Portal                                      |
| Enforcing strict numerical and temporal bounds.               |
|                                                               |
| Transfer Amount ($10.00 – $10,000.00) *                       |
| [ 500.00                                                    ] |
| min="10.00" max="10000.00" step="0.01"                       |
|                                                               |
| Execution Date (2026-07-01 to 2026-12-31) *                  |
| [ 2026-08-21                                                ] |
| min="2026-07-01" max="2026-12-31" step="1" (daily)           |
|                                                               |
| Settlement Time Slot (09:00 – 17:00, 15m intervals) *         |
| [ 09:15                                                     ] |
| min="09:00" max="17:00" step="900" (900s = 15 minutes)        |
|                                                               |
| [ Execute Wire Transfer                                     ] |
|                                                               |
| [AMOUNT] Real-time Validity:                                  |
| • Value: "500.00"                                             |
| • rangeUnderflow: false                                       |
| • rangeOverflow: false                                        |
| • stepMismatch: false                                         |
| • valid: true                                                 |
+---------------------------------------------------------------+