Slider
Horizontal or vertical numeric range control.
Add it to your project
Eject the complete slider group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject sliderbash
npx toucan eject sliderapp.tsx
import { Slider } from '@/components/toucan/slider';Use when
Users adjust an approximate numeric value within a known range.
Avoid when
An exact number is important; use a numeric Input.
Example
Value: 50
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Slider
Slider
Props type: SliderProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
defaultValue | number | undefined | No | Initial value when the component is uncontrolled. |
disabled | boolean | false | No | Prevents interaction when true. |
label | string | undefined | No | Visible or accessible label for the control. |
max | number | 100 | No | Maximum permitted value. |
min | number | 0 | No | Minimum permitted value. |
onChange | (value: number) => void | undefined | No | Called when the value changes. |
orientation | "horizontal" | "vertical" | 'horizontal' | No | Horizontal or vertical orientation. |
step | number | 1 | No | Increment between permitted numeric values. |
value | number | undefined | No | Controlled value. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
SliderProps
Accessibility
- Provides slider role, value metadata, labelling, and keyboard increments.
Token families
sliderfocus