angle-slider-controlled-demo

1"use client";
2 
3import { RotateCcwIcon, ShuffleIcon } from "lucide-react";
4import { animate } from "motion/react";
5import * as React from "react";
6import {
7  AngleSlider,
8  AngleSliderRange,
9  AngleSliderThumb,
10  AngleSliderTrack,
11  AngleSliderValue,
12} from "@/registry/bases/base/ui/angle-slider";
13import { Button } from "@/registry/bases/base/ui/button";
14 
15export default function AngleSliderControlledDemo() {
16  const [value, setValue] = React.useState([180]);
17  const animationRef = React.useRef<ReturnType<typeof animate> | null>(null);
18 
19  const animateToValue = React.useCallback(
20    (targetValue: number) => {
21      if (animationRef.current) {
22        animationRef.current.stop();
23      }
24 
25      const currentValue = value[0] ?? 0;
26 
27      let diff = targetValue - currentValue;
28      if (diff > 180) {
29        diff -= 360;
30      } else if (diff < -180) {
31        diff += 360;
32      }
33 
34      animationRef.current = animate(0, diff, {
35        duration: 0.4,
36        ease: [0.25, 0.46, 0.45, 0.94],
37        onUpdate: (progress: number) => {
38          const animatedValue = currentValue + progress;
39          const normalizedValue = Math.round(
40            ((animatedValue % 360) + 360) % 360,
41          );
42          setValue([normalizedValue]);
43        },
44        onComplete: () => {
45          setValue([targetValue]);
46          animationRef.current = null;
47        },
48      });
49    },
50    [value],
51  );
52 
53  const onReset = React.useCallback(() => {
54    animateToValue(0);
55  }, [animateToValue]);
56 
57  const onRandomize = React.useCallback(() => {
58    animateToValue(Math.floor(Math.random() * 360));
59  }, [animateToValue]);
60 
61  React.useEffect(() => {
62    return () => {
63      if (animationRef.current) {
64        animationRef.current.stop();
65      }
66    };
67  }, []);
68 
69  return (
70    <div className="flex flex-col gap-4">
71      <div className="flex items-center gap-3">
72        <Button variant="outline" size="sm" onClick={onReset}>
73          <RotateCcwIcon />
74          Reset
75        </Button>
76        <Button size="sm" onClick={onRandomize}>
77          <ShuffleIcon />
78          Randomize
79        </Button>
80      </div>
81      <AngleSlider
82        value={value}
83        onValueChange={setValue}
84        max={360}
85        min={0}
86        step={1}
87        size={80}
88      >
89        <AngleSliderTrack>
90          <AngleSliderRange />
91        </AngleSliderTrack>
92        <AngleSliderThumb />
93        <AngleSliderValue />
94      </AngleSlider>
95    </div>
96  );
97}