Slider

Drag control for adjusting a value within a range.

Installation

npx shadcn@latest add @iconiq/r-slider

Props

Slider

Single-value slider with the same Iconiq label row, spring-settled fill, and thumb motion layered over Radix UI primitives.

valuenumber

Controlled value. When provided, the parent owns the current position.

defaultValuenumber

Default 50

Initial internal value used when value is not supplied.

minnumber

Default 0

Lower bound used for clamping and display mapping.

maxnumber

Default 100

Upper bound used for clamping and display mapping.

stepnumber

Default 1

Step size applied after translating pointer position into a raw numeric value.

onChange(value: number) => void

Called for live value updates from pointer or keyboard input when the snapped value actually changes.

onValueCommit(value: number) => void

Called when an interaction is committed, such as releasing a drag or finishing a keyboard step.

showValueboolean

Default true

Controls whether the live numeric readout is shown on the right side of the label row.

valueDecimalsnumber

Default 0

Controls how many decimal places are shown in the readout when you want precision without custom formatting.

formatValue(value: number) => string

Optional formatter for the visible readout and aria-valuetext, useful for units such as dB, percent, or milliseconds.

labelstring

Optional label shown on the left side of the header row above the track.

ariaLabelstring

Accessible name used when no visible label is rendered for the slider.

ariaLabelledBystring

ID of an external label element that should be announced instead of the built-in label.

marks{ value: number; label?: string }[]

Optional tick marks rendered below the track so large ranges can include landmarks like Low, Medium, and High.

When value is undefined, the component stores the current value internally and updates it during drag operations.

The displayed value is derived from the animated motion value, so the readout stays in sync with the spring animation rather than jumping immediately.

Touch interaction keeps vertical page scrolling available with pan-y while still supporting horizontal dragging on the slider itself.

Interaction model

Slider supports pointer, keyboard, and screen-reader friendly range semantics.

Built on Radix Slider.Root, Slider.Track, Slider.Range, and Slider.Thumb while preserving the same active track-height animation, spring-smoothed fill, and thumb scale behavior as the core slider.

The thumb and filled track animate with springs whenever the current value changes.

Pointer capture is taken on pointer down and released on pointer up or cancel, which keeps dragging stable even when the pointer leaves the track.

Keyboard support includes Arrow keys for step changes, Page Up and Page Down for larger jumps, and Home and End for min and max.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-slider, motion.

Installs a Radix slider with the same value, defaultValue, min, max, step, marks, and formatting API as the Base UI version.

Uses the Radix slider track, range, and thumb primitives under the same Iconiq track and thumb motion shell.

The generated registry file is /r/r-slider.json.