Slider
A flat range slider — thick navy border, lemon thumb, five color variants. Fully controlled / uncontrolled.
Bare (no props)
The simplest usage: a single thumb, no label. Useful when the slider sits inside a labeled section or when the parent provides context.
slider-bare-demo.app
With props (label, value, trailing unit, range)
Pass label, showValue, and trailingLabel to render a labelled slider.
Use an array value for a range slider with two thumbs (great for min/max).
slider-with-label-demo.app
Volume42dB
Sweetness30 – 70
Pink variant
slider-pink-demo.app
Range (two thumbs)
slider-range-demo.app
Installation
terminal.sh
npx y2kui@latest add sliderUsage
import { Slider } from "@/components/ui/slider"Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'pink' | 'mint' | 'lilac' | 'lemon' | 'default' | Pastel color for the filled range. |
value | number[] | — | Controlled value (one number per thumb). |
defaultValue | number[] | — | Initial value (uncontrolled). |
onValueChange | (value: number[]) => void | — | Fired when the value changes. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Step increment. |
label | ReactNode | — | Optional label shown above the slider. |
showValue | boolean | false | Show the current numeric value next to the label. |
trailingLabel | ReactNode | — | Right-aligned unit text (e.g. 'dB', 'px'). |
disabled | boolean | false | Disable the slider. |