Core Elements
Slider
A draggable control for selecting one value or a range along a track.
Usage
Installation
npm install @wunderui/reactThen import what you need:
import {
Slider,
SliderControl,
SliderIndicator,
SliderLabel,
SliderThumb,
SliderTrack,
SliderValue,
} from "@wunderui/react"Examples
Default
Drag the thumb or use the arrow keys.
Disabled
Shown but not adjustable.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Filter panel
Range slider as a price filter next to checkboxes.
API Reference
| Prop | Type | Default |
|---|---|---|
| value / defaultValue | number | number[] | — |
| min / max / step | number | 0 / 100 / 1 |
| onValueChange | (value: number | number[]) => void | — |