Added slider label on drag

src/components/Slider.js

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { Box, Slider as ThemeSlider } from "theme-ui";
+
+function Slider({ min, max, value, ml, mr, labelFunc, ...rest }) {
+  const percentValue = ((value - min) * 100) / (max - min);
+
+  const [labelVisible, setLabelVisible] = useState(false);
+
+  return (
+    <Box sx={{ position: "relative" }} ml={ml} mr={mr}>
+      {labelVisible && (
+        <Box
+          sx={{
+            position: "absolute",
+            top: "-42px",
+          }}
+          style={{
+            left: `calc(${percentValue}% + ${-8 - percentValue * 0.15}px)`,
+          }}
+        >
+          <Box
+            sx={{
+              width: "32px",
+              height: "32px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "50% 50% 50% 0%",
+              transform: "rotate(-45deg)",
+            }}
+            bg="primary"
+          >
+            <Box
+              sx={{
+                fontFamily: "body2",
+                fontWeight: "caption",
+                fontSize: 0,
+                transform: "rotate(45deg)",
+              }}
+            >
+              {labelFunc(value)}
+            </Box>
+          </Box>
+        </Box>
+      )}
+      <ThemeSlider
+        min={min}
+        max={max}
+        value={value}
+        onMouseDown={() => setLabelVisible(true)}
+        onMouseUp={() => setLabelVisible(false)}
+        onTouchStart={() => setLabelVisible(true)}
+        onTouchEnd={() => setLabelVisible(false)}
+        {...rest}
+      />
+    </Box>
+  );
+}
+
+Slider.defaultProps = {
+  min: 0,
+  max: 1,
+  value: 0,
+  ml: 0,
+  mr: 0,
+  labelFunc: (value) => value,
+};
+
+export default Slider;

src/components/note/NoteMenu.js

@@ -1,5 +1,7 @@
 import React, { useEffect, useState, useContext } from "react";
-import { Box, Input, Slider, Flex, Text, IconButton } from "theme-ui";
+import { Box, Input, Flex, Text, IconButton } from "theme-ui";
+
+import Slider from "../Slider";
 
 import MapMenu from "../map/MapMenu";
 

src/components/party/Stream.js

@@ -1,9 +1,10 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Text, IconButton, Box, Slider, Flex } from "theme-ui";
+import { Text, IconButton, Box, Flex } from "theme-ui";
 
 import StreamMuteIcon from "../../icons/StreamMuteIcon";
 
 import Banner from "../Banner";
+import Slider from "../Slider";
 
 function Stream({ stream, nickname }) {
   const [streamVolume, setStreamVolume] = useState(1);

src/components/token/TokenMenu.js

@@ -1,5 +1,7 @@
 import React, { useEffect, useState, useContext } from "react";
-import { Box, Input, Slider, Flex, Text, IconButton } from "theme-ui";
+import { Box, Input, Flex, Text, IconButton } from "theme-ui";
+
+import Slider from "../Slider";
 
 import MapMenu from "../map/MapMenu";
 

src/modals/SettingsModal.js

@@ -1,15 +1,8 @@
 import React, { useState, useContext } from "react";
-import {
+import { Label, Flex, Button, useColorMode, Checkbox, Divider } from "theme-ui";
-  Label,
-  Flex,
-  Button,
-  useColorMode,
-  Checkbox,
-  Slider,
-  Divider,
-} from "theme-ui";
 
 import Modal from "../components/Modal";
+import Slider from "../components/Slider";
 
 import AuthContext from "../contexts/AuthContext";
 import DatabaseContext from "../contexts/DatabaseContext";
@@ -86,6 +79,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
               sx={{ width: "initial" }}
               value={labelSize}
               onChange={(e) => setLabelSize(parseFloat(e.target.value))}
+              labelFunc={(value) => `${value}x`}
             />
           </Label>
           <Divider bg="text" />