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.