Browse components
Scrub Field
Design-tool number field: drag sideways to scrub the value over a sliding tick ruler, Shift for coarse, Alt for fine, and it stretches like rubber at the limits. Click to type, arrows to step.
Installation
npx shadcn@latest add @glint-ui/scrub-fieldFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/scrub-field.json
Usage
import { ScrubField } from "@/components/ui/scrub-field";
<ScrubField label="Radius" unit="px" min={0} max={72} value={radius} onChange={setRadius} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Opacity" | Field label. |
| unit | string | "%" | Suffix after the number. |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| step | number | 1 | Step per notch. Alt scrubs at a tenth of it. |
| pixelsPerStep | number | 4 | Pointer px per step while scrubbing. |
| value | ReactNode | — | Controlled value, pair with onChange. |
| defaultValue | ReactNode | — | Initial value when uncontrolled (64). |
| onChange | ReactNode | — | (value: number) => void. |
| className | string | — | Extra classes for the root element. |