Slider
Slider picks a value (or a range) along a continuous track by dragging the thumb.
Use it when a rough sense of the value matters more than the exact number (volume, brightness). Keyboard: arrow keys, Home/End, PageUp/PageDown.
Brightness70
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Slider } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
60
With icon & value
Controlled with value / onValueChange.
Price range ($)20 – 60
Range & step
Two thumbs select a range; step makes the thumbs move in increments.
Size & disabled
small, medium (default).
Volume
Glass (Yugen Labs)
Press or drag: the thumb turns to glass and grows, so the track shows through it.
Usage
Do
- Always provide a label or aria-label.
- Show the value (showValue) when the number means something to people.
Don't
- Don't use Slider when people need to enter an exact number. Use SpinButton.
- Don't use it for a wide range with small steps (hard to drag precisely).
Props
| Prop · Type | Default | Description |
|---|---|---|
| value / defaultValuenumber[] | Default: — | One item = one thumb, two items = a range. |
| onValueChange(value: number[]) => void | Default: — | Called while dragging. |
| min / max / stepnumber | Default: 0 / 100 / 1 | Range and step. |
| size"small" | "medium" | Default: "medium" | Thumb 16 / 20px. |
| label / showValueReactNode / boolean | Default: — | Label and value shown above the track. |
| rootClassNamestring | Default: — | Class for the outer wrapper (set the width here). |
| material"glass" | Default: — | Yugen Labs — the thumb turns to glass and grows while pressed or dragged. |