Examples
Common usage patterns for <tng-number-range>, from a simple range field through constrained inputs, validation feedback, and state variants.
Form usage
A live submit-ready number range example using controlled component state.
Number range form usage
Basic range
The default component path for a plain numeric min/max range input.
Basic range (Plain-CSS)
Basic range (Tailwind CSS)
With constraints
Bounded range with min, max, and step constraints. Automatic validity checking detects out-of-bound values.
Constrained range (Plain-CSS)
Accepts 0–100 in steps of 5
Constrained range (Tailwind CSS)
Accepts 0–100 in steps of 5
Validation feedback
Invalid states — auto-computed when min exceeds max, or forced via the explicit [invalid] input.
Validation feedback (Plain-CSS)
Minimum must not exceed maximum.
Validation feedback (Tailwind CSS)
Minimum must not exceed maximum.
Readonly and disabled states
Side-by-side state treatment for readonly and disabled range fields.