shadcn.io is not affiliated with official shadcn/ui

Shadcn Slider for React

A slider for selecting a value from a range.

PreviewCode

Installation

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

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

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

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

This component depends on Field. Install it first if you haven't already.

Install the following dependencies:

bun add @base-ui/react

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

Copy and paste the following code into your project.

components/ui/slider.tsx

"use client";

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

export const Slider = (props: SliderPrimitive.Root.Props) => {
  const {
    className,
    defaultValue,
    value,
    min = 0,
    max = 100,
    children,
    ...rest
  } = props;

Update the import paths to match your project setup.

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

Key	Description
`ArrowUp`	Increase the value when `orientation` is `"vertical"`.
`ArrowDown`	Decrease the value when `orientation` is `"vertical"`.
`ArrowLeft`	Decrease the value when `orientation` is `"horizontal"`.
`ArrowRight`	Increase the value when `orientation` is `"horizontal"`.
`PageUp`	Increase the value.
`PageDown`	Decrease the value.
`Home`	Go to the start.
`End`	Go to the end.

Demos

Range

Use an array with two values for a range slider.

PreviewCode

Multiple

Use an array with multiple values for multiple thumbs.

PreviewCode

Vertical

Use orientation="vertical" for a vertical slider.

PreviewCode

Controlled

Controlled slider with a live value readout.

PreviewCode

Disabled

Use the disabled prop to disable the slider.

PreviewCode

Rtl

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

PreviewCode

API Reference

Slider

div

PropType

value?Value

defaultValue?Value

onValueChange?(value: Value extends number ? number : Value, eventDetails: SliderRoot.ChangeEventDetails) → void

disabled?boolean

form?string

format?Intl.NumberFormatOptions

largeStep?number

locale?Intl.LocalesArgument

max?number

min?number

minStepsBetweenValues?number

name?string

onValueCommitted?(value: Value extends number ? number : Value, eventDetails: SliderRoot.CommitEventDetails) → void

orientation?"horizontal" | "vertical"

step?number

thumbAlignment?"center" | "edge" | "edge-client-only"

thumbCollisionBehavior?"push" | "swap" | "none"

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"slider"

data-scope"slider"

data-part"root"

data-disabled?string

data-dragging?string

data-focus?string

data-invalid?string

data-orientationstring

SliderThumb

div

PropType

disabled?boolean

getAriaLabel?((index: number) → string) | null

getAriaValueText?((formattedValue: string, value: number, index: number) → string) | null

index?number

inputRef?React.Ref<HTMLInputElement>

onBlur?React.FocusEventHandler<HTMLInputElement>

onFocus?React.FocusEventHandler<HTMLInputElement>

onKeyDown?React.KeyboardEventHandler<HTMLInputElement>

tabIndex?number

AttributeType

data-slot"slider-thumb"

data-scope"slider"

data-part"thumb"

aria-disabledstring

aria-labelstring

aria-labelledbystring

aria-orientationstring

aria-valuemaxstring

aria-valueminstring

aria-valuenowstring

aria-valuetextstring

data-disabled?string

data-dragging?string

data-focus?string

data-indexstring

data-namestring

data-orientationstring

role"slider"

SliderTrack

div

AttributeType

data-slot"slider-track"

data-scope"slider"

data-part"track"

data-disabled?string

data-dragging?string

data-focus?string

data-invalid?string

data-orientationstring

SliderControl

div

AttributeType

data-scope"slider"

data-part"control"

data-disabled?string

data-dragging?string

data-focus?string

data-invalid?string

data-orientationstring

SliderLabel

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"slider-label"

data-scope"slider"

data-part"root"

data-disabled?string

data-dragging?string

data-focus?string

data-invalid?string

data-orientationstring

SliderValue

PropType

children?null | ((formattedValues: readonly string[], values: readonly number[]) → React.ReactNode)

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"progress-value"

data-scope"slider"

data-part"root"

data-disabled?string

data-dragging?string

data-focus?string

data-invalid?string

data-orientationstring