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 | 1x 1x 1x 1x 1x 1x 1x 1x | import { styled } from "@mui/material";
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";
interface ColorProps {
sliderColor: string;
}
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;
}
const StyledSlider = styled(Slider, {
shouldForwardProp: (prop) => prop !== "sliderColor", // Prevents `color` prop from being passed to the DOM
})<ColorProps>(({ theme, sliderColor }) => ({
'& .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),
"& .MuiSlider-track": {
backgroundColor: sliderColor,
height: "0.625rem",
borderRadius: "1.5625rem",
borderColor: sliderColor,
},
"& .MuiSlider-rail": {
height: "0.625rem",
borderRadius: "1.5625rem",
},
"& .MuiSlider-thumb": {
height: "1.25rem",
width: "1.25rem",
backgroundColor: sliderColor,
},
"& .MuiSlider-valueLabel": {
left: "calc(-50% + 0.25rem)",
lineHeight: 1.2,
background: "unset",
padding: 0,
width: 32,
height: 32,
borderRadius: "50% 50% 50% 0",
backgroundColor: sliderColor,
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)",
},
},
"& .MuiSlider-mark": {
display: "none",
},
}));
export default function RatingsSlider({ value, onChange }: SliderProps) {
const props = { color: getSliderColor(value) };
return (
<StyledSlider
aria-label={RATINGS_SLIDER}
sliderColor={props.color}
value={value}
min={0}
max={1}
step={0.01}
marks={marks}
valueLabelDisplay="on"
valueLabelFormat={(value) => <SliderLabel value={value} />}
onChange={(event, value) => {
onChange(value);
}}
/>
);
}
|