Component

Slider

A range input for selecting numeric values. Supports single value, range selection, step marks, and both horizontal and vertical orientations.

View component changelog

preview

React
"use client"

import Slider from "@radui/ui/Slider"

const SliderExample = () => {
    return (
        <div className="flex flex-col gap-6 w-[280px]">
            <Slider aria-label="Volume" defaultValue={40} min={0} max={100} />
            <Slider aria-label="Brightness" defaultValue={70} min={0} max={100} />
            <Slider aria-label="Contrast" defaultValue={20} min={0} max={100} disabled />
        </div>
    )
}

export default SliderExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Slider from "@radui/ui/Slider"

export default () => {
    return (
        <Slider.Root>
            <Slider.Track>
                <Slider.Range>
                    <Slider.Thumb aria-label="Value" />
                </Slider.Range>
            </Slider.Track>
        </Slider.Root>
    )
}

Root

The root Slider component.

Prop	Type	Default
value	number \| number[]	--
defaultValue	number \| number[]	--
min	number	0
max	number	100
step	number	1
pageStepMultiplier	number	10
orientation	enum	horizontal
disabled	boolean	false
showStepMarks	boolean	false
formatValue	function	--
onValueChange	function	--
onValueCommit	function	--

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus to the slider thumb.
`ArrowRight`	Increases the value by one step in left-to-right layouts and decreases it in right-to-left layouts.
`ArrowUp`	Increases the value by one step.
`ArrowLeft`	Decreases the value by one step in left-to-right layouts and increases it in right-to-left layouts.
`ArrowDown`	Decreases the value by one step.
`Home`	Moves the focused thumb to the minimum value.
`End`	Moves the focused thumb to the maximum value.
`PageUp`	For a single-thumb Slider, increases the value by step multiplied by pageStepMultiplier.
`PageDown`	For a single-thumb Slider, decreases the value by step multiplied by pageStepMultiplier.

ARIA References

Reference	What Rad UI follows
Slider pattern	Uses slider semantics on each focusable thumb with value range attributes, orientation, and optional aria-valuetext from formatValue.