dotUI

Slider

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

<Slider aria-label="Opacity" defaultValue={50}>
  <SliderControl />
</Slider>

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/slider

Use slider to allow users to select a value from within a given range.

import { Slider, SliderControl } from "@/components/ui/slider";

<Slider defaultValue={50}>
  <SliderControl />
</Slider>

Use the controls below to experiment with different slider props and see the live preview and code update.

Volume

label

orientation

isDisabled

<Slider defaultValue={50}>
  <Label>Volume</Label>
  <SliderControl />
</Slider>

A slider allows a user to select one or more values within a range.

A slider track is a container for one or more slider thumbs.