Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | 1x 1x 1x 1x 1x 1x 1x | import Slider from "@mui/material/Slider";
import {
AMAZING,
NEGATIVE,
NEUTRAL,
POSITIVE,
RATINGS_SLIDER,
} from "components/RatingsSlider/constants";
import { getSliderColor } from "components/RatingsSlider/getSliderColor";
import SliderLabel from "components/RatingsSlider/SliderLabel";
import makeStyles from "utils/makeStyles";
interface ColorProps {
color: string;
}
const useStyles = makeStyles((theme) => ({
root: {
'& .MuiSlider-markLabel[data-index="0"]': {
transform: "translateX(0%)",
},
'& .MuiSlider-markLabel[data-index="3"]': {
transform: "translateX(-100%)",
},
height: "0.5rem",
borderRadius: "1.5625rem",
marginTop: theme.spacing(6),
marginBottom: theme.spacing(1),
},
track: (props: ColorProps) => ({
backgroundColor: props.color,
height: "0.625rem",
borderRadius: "1.5625rem",
borderColor: props.color,
}),
rail: {
height: "0.625rem",
borderRadius: "1.5625rem",
},
thumb: (props: ColorProps) => ({
height: "1.25rem",
width: "1.25rem",
backgroundColor: props.color,
}),
valueLabel: (props: ColorProps) => ({
left: "calc(-50% + 0.25rem)",
lineHeight: 1.2,
background: "unset",
padding: 0,
width: 32,
height: 32,
borderRadius: "50% 50% 50% 0",
backgroundColor: props.color,
transformOrigin: "bottom left",
transform: "translate(50%, -100%) rotate(-45deg) scale(0)",
"&::before": { display: "none" },
"&.MuiSlider-valueLabelOpen": {
transform: "translate(50%, -100%) rotate(-45deg) scale(1)",
},
"& > *": {
transform: "rotate(45deg)",
},
}),
mark: {
display: "none",
},
}));
const marks = [
{
value: 0,
label: `${NEGATIVE}`,
},
{
value: 0.33,
label: `${NEUTRAL}`,
},
{
value: 0.67,
label: `${POSITIVE}`,
},
{
value: 1,
label: `${AMAZING}`,
},
];
interface SliderProps {
value: number;
onChange: (value: number | number[]) => void;
}
export default function RatingsSlider({ value, onChange }: SliderProps) {
const props = { color: getSliderColor(value) };
const classes = useStyles(props);
return (
<Slider
classes={{
root: classes.root,
thumb: classes.thumb,
track: classes.track,
rail: classes.rail,
valueLabel: classes.valueLabel,
mark: classes.mark,
}}
aria-label={RATINGS_SLIDER}
value={value}
min={0}
max={1}
step={0.01}
marks={marks}
valueLabelDisplay="on"
valueLabelFormat={(value) => <SliderLabel value={value} />}
onChange={(event, value) => {
onChange(value);
}}
/>
);
}
|