Added slider label on drag
This commit is contained in:
parent
395c6d3b15
commit
088466ea07
69
src/components/Slider.js
Normal file
69
src/components/Slider.js
Normal file
@ -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;
|
@ -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";
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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";
|
||||
|
||||
|
@ -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`}
|
||||
/>
|
||||
</Label>
|
||||
<Divider bg="text" />
|
||||
|
Loading…
Reference in New Issue
Block a user