From fd506b7f50a4afa41c4998c14af4369f51ba067a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Wed, 18 Dec 2024 13:32:11 +0100
Subject: [PATCH] slider: displays current value while dragging the thumb

---
 client/src/components/ui/slider.tsx | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/client/src/components/ui/slider.tsx b/client/src/components/ui/slider.tsx
index e8a7543c..c2bef11d 100644
--- 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])}