Merge pull request #38 from david-ponc/feature/tooltip-in-slider

feat: tooltip in slider

Author: pheralb

website/app/components/navbar/options.tsx

@@ -3,6 +3,7 @@ import { useSearchParams } from "@remix-run/react";
 import { Input } from "@/ui/input";
 import { Slider } from "@/ui/slider";
 import { iconSizeParamKey, searchParamKey } from "@/data/searchParams";
+import { useEffect, useState } from "react";
 
 interface iSearchProps {
   className?: string;
@@ -40,7 +41,9 @@ export const Search = (props: iSearchProps) => {
 // 📏 Icon Size Slider:
 export const IconSize = () => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const iconSizeValue = searchParams.get(iconSizeParamKey) || 45;
+  const [iconSizeValue, setIconSizeValue] = useState(
+    Number(searchParams.get(iconSizeParamKey)) || 45,
+  );
 
   const handleChange = (value: number[]) => {
     const newSearchParams = new URLSearchParams(searchParams);
@@ -52,11 +55,15 @@ export const IconSize = () => {
     setSearchParams(newSearchParams);
   };
 
+  useEffect(() => {
+    handleChange([iconSizeValue]);
+  }, [iconSizeValue]);
+
   return (
     <Slider
       title="Icon Size"
-      defaultValue={[Number(iconSizeValue)]}
-      onValueChange={(value) => handleChange(value)}
+      value={[Number(iconSizeValue)]}
+      onValueChange={(value) => setIconSizeValue(value[0])}
       max={70}
       min={20}
       step={1}

website/app/ui/slider.tsx

@@ -2,29 +2,66 @@
 import * as SliderPrimitive from "@radix-ui/react-slider";
 
 import { cn } from "@/utils";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useState } from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
 
 const Slider = forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className,
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-zinc-900/20 dark:bg-zinc-800">
-      <SliderPrimitive.Range className="absolute h-full bg-zinc-900 dark:bg-zinc-600" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb
-      title="Increase or decrease the size"
-      className="block h-4 w-4 rounded-full border border-zinc-200 border-zinc-900/50 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:border-zinc-50/50 dark:border-zinc-800 dark:bg-zinc-500 dark:focus-visible:ring-zinc-600"
-    />
-  </SliderPrimitive.Root>
-));
+>(({ className, ...props }, ref) => {
+  const [showTooltipState, setShowTooltipState] = useState(false);
+  const handlePointerDown = () => {
+    setShowTooltipState(true);
+  };
+
+  const handlePointerUp = () => {
+    setShowTooltipState(false);
+  };
+
+  useEffect(() => {
+    document.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      document.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, []);
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-zinc-900/20 dark:bg-zinc-800">
+        <SliderPrimitive.Range className="absolute h-full bg-zinc-900 dark:bg-zinc-600" />
+      </SliderPrimitive.Track>
+      <TooltipProvider>
+        <Tooltip delayDuration={0} open={showTooltipState}>
+          <TooltipTrigger asChild>
+            <SliderPrimitive.Thumb
+              title="Increase or decrease the size"
+              onMouseEnter={() => setShowTooltipState(true)}
+              onMouseLeave={() => setShowTooltipState(false)}
+              onFocus={() => setShowTooltipState(true)}
+              onBlur={() => setShowTooltipState(false)}
+              className="block h-4 w-4 rounded-full border border-zinc-200 border-zinc-900/50 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:border-zinc-50/50 dark:border-zinc-800 dark:bg-zinc-500 dark:focus-visible:ring-zinc-600"
+            />
+          </TooltipTrigger>
+          <TooltipContent align="center" side="top" className="text-center">
+            {props.value?.at(0)}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </SliderPrimitive.Root>
+  );
+});
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export { Slider };