Shadcn Slider for React

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/slider.json

npx shadcn@latest add https://kit.dev/r/radix/slider.json

pnpm dlx shadcn@latest add https://kit.dev/r/radix/slider.json

yarn shadcn@latest add https://kit.dev/r/radix/slider.json

bun add radix-ui

npm install radix-ui

pnpm add radix-ui

yarn add radix-ui

"use client";

import { Slider as SliderPrimitive } from "radix-ui";
import React from "react";
import { cn } from "@/lib/utils";
import { FieldLabel } from "@/components/ui/field";

export const Slider = (
  props: React.ComponentProps<typeof SliderPrimitive.Root>
) => {
  const {
    className,
    defaultValue,
    value,
    min = 0,
    max = 100,
    children,
    ...rest

Anatomy

Slider
├── SliderLabel
├── SliderThumb
├── SliderValue
├── SliderTrack
├── SliderRange
├── SliderControl
├── SliderMarkerGroup
├── SliderMarker
└── SliderDraggingIndicator

Usage

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

<Slider
  className="mx-auto w-full max-w-xs"
  defaultValue={[75]}
  max={100}
  step={1}
/>

Accessibility

Demos

Range

Use an array with two values for a range slider.

Multiple

Use an array with multiple values for multiple thumbs.

Vertical

Use orientation="vertical" for a vertical slider.

Controlled

Controlled slider with a live value readout.

Disabled

Use the disabled prop to disable the slider.

Rtl

Right-to-left slider. See the RTL configuration guide for document direction.

API Reference