From 2d88ed74ea73593f95ecf2a6121b76a7fa48180c Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Tue, 12 Nov 2024 07:08:56 +0000
Subject: [PATCH] Add a tooltip to describe the current volume level.

---
 src/Slider.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Slider.tsx b/src/Slider.tsx
index aa9309e7..fb0ea04d 100644
--- a/src/Slider.tsx
+++ b/src/Slider.tsx
@@ -10,6 +10,7 @@ import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
 import classNames from "classnames";
 
 import styles from "./Slider.module.css";
+import { Tooltip } from "@vector-im/compound-web";
 
 interface Props {
   className?: string;
@@ -66,7 +67,10 @@ export const Slider: FC<Props> = ({
       <Track className={styles.track}>
         <Range className={styles.highlight} />
       </Track>
-      <Thumb className={styles.handle} aria-label={label} />
+      {/* Note: This is expected not to be visible on mobile.*/}
+      <Tooltip placement="top" label={Math.round(value * 100).toString() + "%"}>
+        <Thumb className={styles.handle} aria-label={label} />
+      </Tooltip>
     </Root>
   );
 };