Compact labeled Slider convenience with a live numeric readout. Prefer Slider for dual thumb, marks, orientation, or richer value chrome.
Also known as: labeled number slider, settings slider, numeric readout slider
Install with the CLI, or copy the component source into your project.
Add number-slider (npm)
1npx --yes -p @default-file/ui df-ui add number-slider
Fractional step with a live readout.
Whole-number range.
Compact labeled Slider convenience with a live numeric readout. Composes Label and Slider. Prefer Slider for dual thumb, marks, orientation, or richer value chrome.
| Prop | Type | Default | Notes |
|---|---|---|---|
| label | string | - | Field label above the slider (required). |
| value | number | - | Current value (required). Values outside min to max are clamped for the readout and thumb. |
| min | number | - | Minimum value (required). |
| max | number | - | Maximum value (required). |
| step | number | 0.01 | Increment between values. Also drives display precision. |
| onChange | (value: number) => void | - | Called when the value changes (required). |
| thickness | "sm" | "md" | "lg" | "md" | Track and thumb thickness. Passed through to Slider. sm is fine, md is default, lg is a thick rail. |
| variant | "bar" | "line" | "bar" | Visual recipe. Passed through to Slider. |
Composes Label and Slider. See those components for their own token groups.
| Token | Type | Default | Notes |
|---|---|---|---|
| --spacing-unit | CSS length | 0.25rem | Base unit for the gap between label, slider, and readout. |
| --muted-foreground | CSS color | var(--df-neutral-500) | Readout text color. |