Slider

"use client"

import { cn } from "cn"
import {
  SliderFill,
  Slider as SliderPrimitive,
  SliderThumb,
  SliderTrack,
  type SliderProps as SliderPrimitiveProps,
} from "@animate-ui/react/primitives/react-aria"

type SliderValue = number | number[]
type SliderProps<T extends SliderValue = SliderValue> = Omit<
  SliderPrimitiveProps<T>,
  "className"
> & {
  className?: string
}

function Slider<T extends SliderValue = SliderValue>({
  className,
  ...props
}: SliderProps<T>) {
  return (
    <SliderPrimitive
      className={cn(
        "data-vertical:min-h-40 group relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
        className
      )}
      data-slot="slider"
      {...props}
    >
      {({ state }) => {
        return (
          <>
            <SliderTrack
              data-slot="slider-track"
              className="bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 relative grow overflow-hidden select-none"
            >
              <SliderFill
                data-slot="slider-range"
                className="bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
              />
            </SliderTrack>
            {state.values.map((_, index) => (
              <SliderThumb
                data-slot="slider-thumb"
                key={index}
                index={index}
                className="border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 block shrink-0 select-none group-data-horizontal:top-[50%] group-data-vertical:left-[50%] disabled:pointer-events-none disabled:opacity-50"
              />
            ))}
          </>
        )
      }}
    </SliderPrimitive>
  )
}

export { Slider }

export default function SliderDemo() {
  return (
    <Slider
      aria-label="Slider"
      defaultValue={[75]}
      maxValue={100}
      step={1}
      className="mx-auto w-full max-w-xs"
    />
  )
}

Installation

Install the packages

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

Add the shadcn/ui component

npx shadcn@latest add slider

pnpm dlx shadcn@latest add slider

yarn dlx shadcn@latest add slider

bun x shadcn@latest add slider

Animate it

The CLI finds your shadcn/ui components through components.json, swaps their primitive imports for Animate UI's and removes the CSS animation classes Motion replaces.

npx @animate-ui/cli@latest animate slider

pnpm dlx @animate-ui/cli@latest animate slider

yarn dlx @animate-ui/cli@latest animate slider

bun x @animate-ui/cli@latest animate slider

Usage

Import from Animate UI instead of react-aria-components: it re-exports all of React Aria, with animated Slider, SliderFill and SliderThumb. Everything else stays the same.

import {
  Label,
  Slider,
  SliderFill,
  SliderOutput,
  SliderThumb,
  SliderTrack,
} from '@animate-ui/react/primitives/react-aria';

export function Volume() {
  return (
    <Slider defaultValue={50}>
      <Label>Volume</Label>
      <SliderOutput />
      <SliderTrack>
        <SliderFill />
        <SliderThumb />
      </SliderTrack>
    </Slider>
  );
}

Animation

Animate UI v1 had no slider: it moves like v1's switch thumb.

The dragged (React Aria's isDragging) thumb stretches along the track: its width grows by 3/16 (a 16px thumb becomes 19px, v1's switch pressedWidth), on a spring (stiffness 400, damping 32), and springs back on release. It's the thumb's real width, so its round ends stay round, and React Aria centers it on its value, so it grows on both sides (along its height in a vertical slider).
A press on the track glides the thumb and the fill to the new value on the same spring: as quick as v1's switch thumb, calmer (it goes about 1.5% past the value, where v1's switch thumb went about 4%). React Aria positions them with layout: they jump to the new place, and a transform offset springs back (FLIP), so nothing animates left. With a range slider, only the thumb that moves glides.
Dragging follows the pointer instantly, and keyboard changes are instant. Dragging right after a press cancels the glide: the thumb sits under the pointer.
Under reduced motion, presses jump and nothing stretches.