dotUI

Slider

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

Overview

Examples

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

npm

pnpm

yarn

bun

pnpm dlx 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

<Dynamic(Slider) defaultValue={50}>
  <Dynamic(Label)>Volume</Dynamic(Label)>
  <Dynamic(SliderControl) />
</Dynamic(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.