Slider

Drag control for adjusting a value within a range.

Intensity42

Installation

npx shadcn@latest add @iconiq/r-slider

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

Intensity42

Props

Slider

14 props

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

Default50

Initial internal value used when value is not supplied.

minnumber

Default0

Lower bound used for clamping and display mapping.

maxnumber

Default100

Upper bound used for clamping and display mapping.

stepnumber

Default1

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

Defaulttrue

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

valueDecimalsnumber

Default0

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.

Notes

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.

ReducedMotion

1 prop

Shared motion override for the motion-enabled exports documented on this page.

reducedMotionboolean

When true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.

Notes

This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.