Motion Slider

1"use client";
2
3import { useState } from "react";
4
5import {
6  MotionSlider,
7  type SliderMotionPreset,
8  type SliderThumbEffect,
9} from "@/registry/ui/motion-slider";
10
11const examples = [
12  {
13    label: "Responsive scale",
14    preset: "snappy",
15    effect: "scale",
16  },
17  {
18    label: "Smooth lift",
19    preset: "smooth",
20    effect: "lift",
21  },
22  {
23    label: "Soft trailing glow",
24    preset: "slow",
25    effect: "glow",
26  },
27] satisfies Array<{
28  label: string;
29  preset: SliderMotionPreset;
30  effect: SliderThumbEffect;
31}>;
32
33export function MotionSliderExample() {
34  const [values, setValues] = useState([30, 55, 75]);
35
36  return (
37    <div className="grid gap-8 md:grid-cols-3">
38      {examples.map((example, index) => (
39        <MotionSlider
40          key={example.label}
41          label={example.label}
42          value={values[index]}
43          onValueChange={(nextValue) => {
44            setValues((current) =>
45              current.map((value, valueIndex) =>
46                valueIndex === index ? nextValue : value,
47              ),
48            );
49          }}
50          min={0}
51          max={100}
52          step={1}
53          motionPreset={example.preset}
54          thumbEffect={example.effect}
55          formatValue={(value) => `${value}%`}
56        />
57      ))}
58    </div>
59  );
60}