ContextQMD
Back to Shadcn Ui

Slider

apps/v4/content/docs/components/base/slider.mdx

latest1.7 KB
Original Source
<ComponentPreview styleName="base-nova" name="slider-demo" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">Command</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">
bash
npx shadcn@latest add slider
</TabsContent> <TabsContent value="manual"> <Steps className="mb-0 pt-2">

<Step>Install the following dependencies:</Step>

bash
npm install @base-ui/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="slider" title="components/ui/slider.tsx" styleName="base-nova" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

tsx
import { Slider } from "@/components/ui/slider"
tsx
<Slider defaultValue={[33]} max={100} step={1} />

Examples

Range

Use an array with two values for a range slider.

<ComponentPreview styleName="base-nova" name="slider-range" />

Multiple Thumbs

Use an array with multiple values for multiple thumbs.

<ComponentPreview styleName="base-nova" name="slider-multiple" />

Vertical

Use orientation="vertical" for a vertical slider.

<ComponentPreview styleName="base-nova" name="slider-vertical" />

Controlled

<ComponentPreview styleName="base-nova" name="slider-controlled" />

Disabled

Use the disabled prop to disable the slider.

<ComponentPreview styleName="base-nova" name="slider-disabled" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="base-nova" name="slider-rtl" direction="rtl" />

API Reference

See the Base UI Slider documentation.