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
label=bottom shows min, current value, and max below the slider.
040100
070100
Custom step
Snaps to multiples of step. Here step=10.
050100
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.
060100
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" | "none" | Shows min / current / max labels below the slider |
| 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 |