Inputs
Range
Pick a numeric value from a continuous range. Compose it inside a Field for its label, description and error.
Import
import { Field, Range } from "@loamui/core";Usage
Every example has a CSStab. That’s the real, complete stylesheet for the component: plain, static CSS, with nothing running in the browser.
Basic usage
Rendered bare, the control needs an aria-label; a Field.Label (below) is the usual way to name it.
Labelled inside a Field
Wrap the control in Field.Root: it reads its id, description and error wiring from the field, the composition pattern shared by all form controls.
Applies to alerts only.
Steps
Snap to increments with the step prop.
Disabled
Guidance
When to use it
- For imprecise, pick-a-feel values where the position matters more than the exact number: volume, brightness, intensity.
- When the effect of the value is visible as it changes, so users steer by the result rather than the figure.
When not to
- For exact numbers the user already knows (a quantity, an amount, a year). Use Input with inputMode="numeric" or "decimal"; landing on one precise value on a track is slow and error-prone, especially on touch.
- For choosing among a few discrete options. Use RadioGroup, where every option is visible and labelled.
Accessibility
- Renders a native <input type="range">: arrow keys adjust the value and Home/End jump to the ends, with the current value announced. There is no custom key handling to maintain.
- Always give it an accessible name: a Field.Label in the surrounding Field.Root, or an aria-label when rendering it bare.
- Assistive tech hears the value change as it moves; sighted users have no equivalent unless you render the value visibly (see above).
How it works
Show the current value
A track communicates roughly where you are, never what you chose, so render the number where the user can see it. Field.Label accepts any content and the control is stateless, so drive it with value and onChange and put the live value in the label.
Steps match the precision users care about
step sets the smallest move a user can make, so match it to differences that actually matter: nobody sets fertiliser to 43 kg. A coarser step makes every reachable value a bigger target: easier with arrow keys, a mouse, or a thumb. If users need finer precision than a comfortable step allows, the value is exact and belongs in an Input.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Increment between valid values. |
defaultValue | number | — | Initial value for uncontrolled usage. |
...others | InputHTMLAttributes | — | All native <input type="range"> props are forwarded. |