Form

Slider

Pick a number or a range by dragging or with the arrow keys. A 4px track, accent range and white thumbs; thumbs grow on touch screens.

Usage

  • Use for settings where position matters more than the exact number (volume, zoom, price filters).
  • Pair with a visible value or a NumberInput when the exact number matters.
  • Don’t use for values with a huge range; small steps become impossible to hit.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/SliderExample.tsx
import { Slider } from '@krackedui/motion';

export function VolumeSlider() {
  return <Slider label="Volume" defaultValue={[60]} />;
}

Examples

Range

Two values make a range; each thumb is named "minimum" / "maximum".

$200 – $800

Step and disabled

Dark theme

API Reference

Slider

Radix Slider. The ref goes to the root <span>.

PropTypeDefault
value / defaultValue
number[]
[min]
onValueChange
(value: number[]) => void
onValueCommit
(value: number[]) => void
min / max
number
0 / 100
step
number
1
minStepsBetweenThumbs
number
disabled
boolean
false
invalid
boolean
false
label
string
formatValue
(value: number) => string
orientation
"horizontal""vertical"
"horizontal"
name
string
id
string
className
string
style
CSSProperties
aria-describedby
string

Accessibility

  • WAI-ARIA slider: each thumb is role="slider" with aria-valuenow/min/max, and aria-valuetext from formatValue.
  • ← / ↓ and → / ↑ step, Page Up / Page Down step ×10, Home / End jump to min / max.
  • Thumbs are named by label or by the surrounding Field label; range thumbs add "minimum" / "maximum".
  • Thumbs get a 24px hit area on touch screens (pointer: coarse).
© 2026 Motion. Internal documentation.