Slider

Name: Rad UI
Author: Rad UI Team

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

React
"use client"

import Slider from "@radui/ui/Slider"

const SliderExample = () => {
    return (
        <div className="flex flex-col gap-6 w-[280px]">
            <Slider defaultValue={40} min={0} max={100} />
            <Slider defaultValue={70} min={0} max={100} />
            <Slider 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
orientation	enum	horizontal
disabled	boolean	false
showStepMarks	boolean	false
formatValue	function	--
onValueChange	function	--
onValueCommit	function	--