Slider

An input where the user selects a value from within a given range.

Value: 50

Installation

npx radk add slider

import { Slider } from "@/components/ui/slider"

<Slider defaultValue={[50]} min={0} max={100} step={1} />

Use two values to create a range slider.

<Slider defaultValue={[25, 75]} min={0} max={100} step={1} />

const [value, setValue] = React.useState([50])

<Slider value={value} onValueChange={setValue} />

<Slider defaultValue={[50]} disabled />

Skeleton

Use to show a placeholder while content is loading.

Spinner

An animated loading indicator for async operations.