Slider
Radix slider with a wobbly track line and a sketch thumb. The filled range is a second, rougher stroke.
<Slider defaultValue={[40]} thumbShape="circle" roughness={1.5} />CLI install
npx doodleui-react add slider
Usage
import { Slider } from "doodleui-react";
<Slider defaultValue={[40]} min={0} max={100} />
Pointer, keyboard, and aria-valuenow come from Radix. doodle-ui only skins the track and thumb.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| value / defaultValue | number[] | required (defaultValue) | Radix slider values. Use a one-item array for a single thumb. |
| min / max / step | number | 0 / 100 / 1 | Range bounds and increment. |
| thumbShape | "circle" | "square" | "circle" | Rough thumb geometry. |
| roughness | number | 1.5 | How wobbly the stroke is. 0 is almost geometric. 3+ is messy. |
| seed | number | provider / random | Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed. |
| sketchColor | string | #1f1d1a | Stroke color. Also tints primary/accent fills where relevant. |
| className | string | undefined | Passed through to the root element. |
| style | CSSProperties | undefined | Passed through to the root element. |