adds tooltip to thumb slider

Vizzuality · Nov 14, 2024 · 123ebfa · 123ebfa
1 parent a6c36a6
commit 123ebfa
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 20 deletions.
diff --git a/client/src/components/ui/slider.tsx b/client/src/components/ui/slider.tsx
@@ -6,6 +6,12 @@ import * as SliderPrimitive from "@radix-ui/react-slider";
 
 import { cn } from "@/lib/utils";
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
 const Thumb = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Thumb>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Thumb>
@@ -48,23 +54,51 @@ Slider.displayName = SliderPrimitive.Root.displayName;
 
 const RangeSlider = React.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={SLIDER_TRACK_STYLES}>
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <Thumb />
-    <Thumb />
-  </SliderPrimitive.Root>
-));
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    format?: (v: number) => number | string;
+  }
+>(({ className, format = (v: number) => v, ...props }, ref) => {
+  const [values, setValues] = React.useState([
+    props.defaultValue?.[0] || 0,
+    props.defaultValue?.[1] || 0,
+  ]);
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center",
+        className,
+      )}
+      {...props}
+      onValueChange={(newValues) => {
+        setValues(newValues);
+        props?.onValueChange?.(newValues);
+      }}
+    >
+      <SliderPrimitive.Track className={SLIDER_TRACK_STYLES}>
+        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      </SliderPrimitive.Track>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Thumb />
+        </TooltipTrigger>
+        <TooltipContent side="top" align="center">
+          {format(values[0])}
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Thumb />
+        </TooltipTrigger>
+        <TooltipContent side="top" align="center">
+          {format(values[1])}
+        </TooltipContent>
+      </Tooltip>
+    </SliderPrimitive.Root>
+  );
+});
 
 RangeSlider.displayName = SliderPrimitive.Root.displayName;
 

diff --git a/client/src/containers/projects/filters/index.tsx b/client/src/containers/projects/filters/index.tsx
@@ -7,6 +7,7 @@ import { useSetAtom } from "jotai/index";
 import { XIcon } from "lucide-react";
 import { useDebounce } from "rooks";
 
+import { formatNumber } from "@/lib/format";
 import { client } from "@/lib/query-client";
 import { queryKeys } from "@/lib/query-keys";
 import { cn } from "@/lib/utils";
@@ -282,8 +283,12 @@ export default function ProjectsFilters() {
           step={1}
           minStepsBetweenThumbs={1}
           onValueChange={debouncedCostChange}
+          format={(v) => formatNumber(v, {})}
+        />
+        <SliderLabels
+          min={formatNumber(INITIAL_COST_RANGE[0])}
+          max={formatNumber(INITIAL_COST_RANGE[1])}
         />
-        <SliderLabels min={INITIAL_COST_RANGE[0]} max={INITIAL_COST_RANGE[1]} />
       </div>
 
       <div className="flex flex-col gap-3">
@@ -300,10 +305,11 @@ export default function ProjectsFilters() {
           step={1}
           minStepsBetweenThumbs={1}
           onValueChange={debouncedAbatementPotentialChange}
+          format={formatNumber}
         />
         <SliderLabels
-          min={INITIAL_ABATEMENT_POTENTIAL_RANGE[0]}
-          max={INITIAL_ABATEMENT_POTENTIAL_RANGE[1]}
+          min={formatNumber(INITIAL_ABATEMENT_POTENTIAL_RANGE[0])}
+          max={formatNumber(INITIAL_ABATEMENT_POTENTIAL_RANGE[1])}
         />
       </div>
     </section>

diff --git a/client/src/lib/format.tsx b/client/src/lib/format.tsx
@@ -11,6 +11,16 @@ export const formatCurrency = (
   }).format(value);
 };
 
+export const formatNumber = (
+  value: number,
+  options: Intl.NumberFormatOptions = {},
+) => {
+  return Intl.NumberFormat("en-US", {
+    style: "decimal",
+    ...options,
+  }).format(value);
+};
+
 export function renderCurrency(
   value: number,
   options: Intl.NumberFormatOptions = {},