slider
An input where the user selects a value from within a given range.
Philosophy
Sliders let users select values within a range through direct manipulation. The @gentleduck/primitives/slider layer provides its own accessible foundation (keyboard arrows, ARIA attributes, RTL support), and this component adds the visual track/range/thumb styling on top. The Root/Track/Range/Thumb decomposition lets you restyle any part without rebuilding the interaction logic.
How It's Built
Installation
npx @gentleduck/cli add slider
npx @gentleduck/cli add slider
Usage
import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[33]} max={100} step={1} />
Examples
Range
Horizontal
Vertical
Component Composition
RTL Support
Set the direction once with DirectionProvider (or <html dir="rtl">) and Slider follows it: the range fills from the right, and ArrowRight decreases the value while ArrowLeft increases it. No dir prop needed.
Motion
Use MotionSlider for a smooth entrance animation powered by motion. The slider uses a scaleIn entrance (fade, scale, and blur) with a springBouncy transition on mount.
motion package. Use MotionSlider instead of Slider. Same props. The regular Slider is perfectly fine - this is an optional enhancement.API Reference
Slider
A unified slider component that supports both single-thumb and multi-thumb (range) usage. Pass a single-element defaultValue array for a single thumb, or a multi-element array for a range slider. Internally composes SliderPrimitive.Root, SliderPrimitive.Track, SliderPrimitive.Range, and dynamically renders SliderPrimitive.Thumb elements based on the values array.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS class names |
defaultValue | number[] | - | Uncontrolled initial values. When omitted (and value is also omitted), two thumbs are rendered at [min, max]. |
value | number[] | - | Controlled values array |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Slider orientation |
dir | 'ltr' | 'rtl' | - | Text direction. Resolved by primitives useDirection (dir prop -> DirectionProvider -> <html dir>) and inherited by slider parts. |
min | number | 0 | Minimum allowed value |
max | number | 100 | Maximum allowed value |
...props | React.ComponentProps<typeof SliderPrimitive.Root> | - | All other props from SliderPrimitive.Root |
MotionSlider
scaleIn entrance (fade, scale, and blur) with springBouncy transition on mount. Requires the motion package.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | SliderProps | - | All props from Slider are supported |
Primitive Sub-components
The following primitives are used internally by Slider:
SliderPrimitive.Root
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Name for form submission |
disabled | boolean | false | Disables the slider |
min | number | 0 | Minimum allowed value |
max | number | 100 | Maximum allowed value |
step | number | 1 | Increment step for values |
value | number[] | - | Controlled values array |
defaultValue | number[] | [min] | Uncontrolled initial values |
onValueChange | (value: number[]) => void | - | Callback fired on every value change |
onValueCommit | (value: number[]) => void | - | Callback fired when interaction ends (pointer up or key commit) |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Slider orientation |
dir | 'ltr' | 'rtl' | - | Text direction for horizontal sliders. Uses the same useDirection resolution order. |
inverted | boolean | false | Inverts the slider direction |
minStepsBetweenThumbs | number | 0 | Minimum number of steps between thumbs |
form | string | - | Associates with a form element by ID |
SliderPrimitive.Track
Renders a <span>. Accepts all standard span props.
SliderPrimitive.Range
Renders a <span>. Accepts all standard span props.
SliderPrimitive.Thumb
Renders a <span>. The thumb index is auto-detected from render order.
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Optional name override for this thumb's hidden input |