Slider

<script setup lang="ts">
import { Slider } from '@/components/ui/slider'
</script>

<template>
  <Slider
    :default-value="[50]"
    :max="100"
    :step="1"
    class="w-[60%]"
  />
</template>

Installation

Install the packages

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

Add the shadcn-vue component

npx shadcn-vue@latest add slider

pnpm dlx shadcn-vue@latest add slider

yarn dlx shadcn-vue@latest add slider

bun x shadcn-vue@latest add slider

Animate it

The CLI finds your shadcn-vue 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

<script setup lang="ts">
import {
  SliderRange,
  SliderRoot,
  SliderThumb,
  SliderTrack,
} from '@animate-ui/vue/primitives/reka-ui';
</script>

<template>
  <SliderRoot :default-value="[50]" :max="100" :step="1">
    <SliderTrack>
      <SliderRange />
    </SliderTrack>
    <SliderThumb aria-label="Volume" />
  </SliderRoot>
</template>

Animation

It moves like Animate UI's React slider.

The pressed or dragged thumb stretches along the track: its width grows by 3/16 (a 16px thumb becomes 19px), 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 reka-ui 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 range to the new value on the same spring: it goes about 1.5% past the value. reka-ui 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.