Slider

1'use client';
2 
3import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
4import {
5  createLiquidSlider,
6  LiquidSliderHandle,
7  LiquidSliderEventMap,
8  LiquidSliderOptions,
9} from '@avenra/liquid-glass';
10 
11export interface LiquidSliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
12  min: number;
13  max: number;
14  value: number;
15  options?: LiquidSliderOptions;
16  events?: {
17    [K in keyof LiquidSliderEventMap]?: (payload: LiquidSliderEventMap[K]) => void;
18  };
19}
20 
21export const LiquidSlider = forwardRef<HTMLDivElement, LiquidSliderProps>(
22  ({ min, max, value, options, events, ...props }, ref) => {
23    const containerRef = useRef<HTMLDivElement>(null);
24    const handleRef = useRef<LiquidSliderHandle | null>(null);
25 
26    useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);
27 
28    useEffect(() => {
29      if (!containerRef.current) return;
30 
31      if (containerRef.current.children.length > 0) return; // already initialized
32 
33      handleRef.current = createLiquidSlider(containerRef.current, {
34        min,
35        max,
36        value,
37        blur: 0,
38        ...options,
39      });
40 
41      return () => {
42        handleRef.current?.destroy();
43        handleRef.current = null;
44      };
45    }, []);
46 
47    useEffect(() => {
48      if (!handleRef.current) return;
49 
50      handleRef.current.value = value;
51    }, [value]);
52 
53    useEffect(() => {
54      if (!handleRef.current) return;
55 
56      handleRef.current.value = Math.min(Math.max(value, min), max);
57    }, [min, max]);
58 
59    useEffect(() => {
60      if (!handleRef.current || !events) return;
61 
62      const handle = handleRef.current;
63 
64      for (const key in events) {
65        const event = key as keyof LiquidSliderEventMap;
66        const handler = events[event];
67 
68        if (handler) {
69          handle.on(event, handler as (payload: LiquidSliderEventMap[typeof event]) => void);
70        }
71      }
72 
73      return () => {
74        if (!handleRef.current || !events) return;
75 
76        const handle = handleRef.current;
77 
78        for (const key in events) {
79          const event = key as keyof LiquidSliderEventMap;
80          const handler = events[event];
81 
82          if (handler) {
83            handle.off(event, handler as (payload: LiquidSliderEventMap[typeof event]) => void);
84          }
85        }
86      };
87    }, [events]);
88 
89    return <div ref={containerRef} {...props} />;
90  },
91);
92 
93LiquidSlider.displayName = 'LiquidSlider';