Components

Range

Range — a slider for picking a single number from a continuous span, such as a price ceiling, a party size, or a number of nights. Set `min`/`max`/`step` to bound and quantize the values, and read the choice through `onChange`, which hands back a plain number. Size with `xs`/`sm`/`md`/`lg` to match the surrounding form, and give it a `tone` to tint the filled track and thumb with a color role. Reach for a Range when the exact figure matters less than the sense of more-or-less; use an Input of type number when a person needs to type a precise value. Pair it with a form field for the label and a live read-out of the current value.