diff --git a/src/components/Slider.js b/src/components/Slider.js
new file mode 100644
index 0000000..fdc601b
--- /dev/null
+++ b/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 (
+
+ {labelVisible && (
+
+
+
+ {labelFunc(value)}
+
+
+
+ )}
+ setLabelVisible(true)}
+ onMouseUp={() => setLabelVisible(false)}
+ onTouchStart={() => setLabelVisible(true)}
+ onTouchEnd={() => setLabelVisible(false)}
+ {...rest}
+ />
+
+ );
+}
+
+Slider.defaultProps = {
+ min: 0,
+ max: 1,
+ value: 0,
+ ml: 0,
+ mr: 0,
+ labelFunc: (value) => value,
+};
+
+export default Slider;
diff --git a/src/components/note/NoteMenu.js b/src/components/note/NoteMenu.js
index 783025d..0fd0732 100644
--- a/src/components/note/NoteMenu.js
+++ b/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";
diff --git a/src/components/party/Stream.js b/src/components/party/Stream.js
index 809db3d..d3e7bcc 100644
--- a/src/components/party/Stream.js
+++ b/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);
diff --git a/src/components/token/TokenMenu.js b/src/components/token/TokenMenu.js
index bf9679e..2009a17 100644
--- a/src/components/token/TokenMenu.js
+++ b/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";
diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js
index d1441de..126d371 100644
--- a/src/modals/SettingsModal.js
+++ b/src/modals/SettingsModal.js
@@ -1,15 +1,8 @@
import React, { useState, useContext } from "react";
-import {
- Label,
- Flex,
- Button,
- useColorMode,
- Checkbox,
- Slider,
- Divider,
-} from "theme-ui";
+import { Label, Flex, Button, useColorMode, Checkbox, 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`}
/>