slider: displays current value while dragging the thumb

Vizzuality · Dec 18, 2024 · fd506b7 · fd506b7
1 parent be3da98
commit fd506b7
Showing 1 changed file with 23 additions and 4 deletions.
diff --git a/client/src/components/ui/slider.tsx b/client/src/components/ui/slider.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import * as React from "react";
+import { useState } from "react";
 
 import * as SliderPrimitive from "@radix-ui/react-slider";
 
@@ -58,6 +59,10 @@ const RangeSlider = React.forwardRef<
     format?: (v: number) => number | string;
   }
 >(({ className, format = (v: number) => v, ...props }, ref) => {
+  const [isDragging, setIsDragging] = useState({
+    left: false,
+    right: false,
+  });
   const [values, setValues] = React.useState([
     props.defaultValue?.[0] || 0,
     props.defaultValue?.[1] || 0,
@@ -79,18 +84,32 @@ const RangeSlider = React.forwardRef<
       <SliderPrimitive.Track className={SLIDER_TRACK_STYLES}>
         <SliderPrimitive.Range className="absolute h-full bg-primary" />
       </SliderPrimitive.Track>
-      <Tooltip>
+      <Tooltip {...(isDragging["left"] && { open: true })}>
         <TooltipTrigger asChild>
-          <Thumb />
+          <Thumb
+            onPointerDown={() => {
+              setIsDragging((prevState) => ({ ...prevState, left: true }));
+            }}
+            onPointerUp={() => {
+              setIsDragging((prevState) => ({ ...prevState, left: false }));
+            }}
+          />
         </TooltipTrigger>
         <TooltipContent side="top" align="center">
           {format(values[0])}
         </TooltipContent>
       </Tooltip>
 
-      <Tooltip>
+      <Tooltip {...(isDragging["right"] && { open: true })}>
         <TooltipTrigger asChild>
-          <Thumb />
+          <Thumb
+            onPointerDown={() => {
+              setIsDragging((prevState) => ({ ...prevState, right: true }));
+            }}
+            onPointerUp={() => {
+              setIsDragging((prevState) => ({ ...prevState, right: false }));
+            }}
+          />
         </TooltipTrigger>
         <TooltipContent side="top" align="center">
           {format(values[1])}