Component
Slider
Selects a numeric value or range along a track.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/sliderExamples
Live previews render through the docs app's PandaCSS codegen.
<Slider aria-label="Volume" defaultValue={[40]} />
<Slider aria-label="Price range" defaultValue={[20, 80]} />
<Slider aria-label="Locked" defaultValue={[60]} disabled />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `thumbLabels` | `string[]` | No | - | Accessible label for each thumb, index-matched. Use on multi-thumb (range)<br />sliders so every thumb has a distinct name — e.g. \`['Minimum', 'Maximum']\`. |
| `shape` | `SliderShape` | No | - | Geometry: linear track (default) or a circular knob. Circular is single-value only. |
| `showValue` | `boolean` | No | - | Render the current value in the center of a circular knob. |
| `formatValue` | `(value: number, max: number) => string` | No | - | Format the circular knob's centered read-out (default: the raw value). |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/slider.json`
- Recipe: `slider`
- Files: `src/components/ui/slider.tsx`