Slider
InputsRange slider with single handle, range mode, and marks.
Built on Radix Slider. Supports single-thumb and range (two-thumb) modes, horizontal and vertical orientations, optional value label (on hover, always, or never), and tick marks at specified positions.
Usage
import { Slider } from "nosible-ux"
export default function Example() {
return <Slider defaultValue={[60]} min={0} max={100} step={1} />
}Examples
With value label and marks
Range mode
Sizes
Accessibility
Built on Radix Slider: role="slider", aria-valuenow/min/max/valuetext are managed. Arrow keys adjust value by step; Home/End jump to min/max.
Props
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | undefined | — | |
defaultValue | number[] | undefined | — | |
dir | Direction | undefined | — | |
disabled | boolean | undefined | — | |
form | string | undefined | — | |
formatValue | ((v: number) => string) | undefined | — | Custom formatter for the value label. Falls back to `String(v)`. |
inverted | boolean | undefined | — | |
marks | number[] | undefined | — | Values at which to render tick marks on the track. |
max | number | undefined | — | |
min | number | undefined | — | |
minStepsBetweenThumbs | number | undefined | — | |
name | string | undefined | — | |
onValueChange | ((value: number[]) => void) | undefined | — | |
onValueCommit | ((value: number[]) => void) | undefined | — | |
orientation | "horizontal" | "vertical" | undefined | "horizontal" | Track orientation. |
showValue | boolean | "always" | undefined | false | When to show the current value label above/beside the thumb. `true` = on hover or drag. `"always"` = always visible. `false` = never. |
size | "sm" | "md" | "lg" | undefined | "md" | Visual and interaction size. |
step | number | undefined | — | |
value | number[] | undefined | — |