Form fields·loomora/RangeField
RangeField
A range control that renders its own track and thumb presentation while exposing a controlled numeric value.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { RangeField } from 'loomora'
<RangeField label="Volume" properties={{ value, setValue, min: 0, max: 100, showValue: true }} />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| properties.value | number | 0 | Current numeric value. |
| properties.setValue | (value: number) => void | — | Required callback for controlled updates. |
| properties.min / max | number | 0 / 0 | Slider bounds. |
| properties.step | number | config default | Increment between values. |
| properties.marks | RangeMark[] | [] | Optional labeled points on the track. |
| showValue / showMinMax | boolean | config defaults | Shows value and endpoint labels. |