Slider
Single-thumb or dual-thumb range slider for numeric input within a defined min/max boundary.
import
{ Slider, RangeSlider } from "@pepulux/ui"Single slider — uncontrolled
Uses defaultValue. No external state needed.
Controlled — with value label
Figma Label=Bottom shows the value under the handle.
40
70
Label: Top floating
Figma Label=Top floating shows the value in a chip above each handle. Works for Slider and RangeSlider; formatLabel customises the text.
40%
25%
50%
Range slider with Label: Bottom
25%
50%
Custom step
Snaps to multiples of step. Here step=10.
50
Range slider (dual handles)
Two draggable handles define a low and high bound.
$200 – $800
18 – 45 yrs
Disabled
Interaction is blocked but the current position is preserved.
60
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled value (Slider) |
| defaultValue | number | — | Uncontrolled initial value |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| step | number | 1 | Value snap increment |
| label | "none" | "bottom" | "top-floating" | "none" | Figma Label — False | Bottom (value under the handle) | Top floating (value chip above the handle) |
| formatLabel | (value: number) => ReactNode | — | Formats the label text, e.g. (v) => `${v}%` |
| onChange | (value: number) => void | — | Called when value changes |
| disabled | boolean | false | Disables drag interaction |
| className | string | — | Additional CSS classes |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | [number, number] | — | Controlled [low, high] pair (RangeSlider) |
| defaultValue | [number, number] | — | Uncontrolled initial range |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| step | number | 1 | Value snap increment |
| onChange | (value: [number, number]) => void | — | Called when either handle moves |
| disabled | boolean | false | Disables both handles |