[React][TypeScript][MUI] Slider 커스텀을 해보자

아래 공식문서와 예시 링크를 참고하였다

https://codesandbox.io/s/lym08b?file=/demo.tsx 

divine-haze-lym08b - CodeSandbox

 

https://mui.com/material-ui/react-slider/

React Slider component - Material UI

  const marks = [
    {
      value: 0,
      label: "0%",
    },
    {
      value: 25,
      label: "25%",
    },
    {
      value: 50,
      label: "50%",
    },
    {
      value: 75,
      label: "75%",
    },
    {
      value: 100,
      label: "100%",
    },
  ];
  function handleChange(event: any, value: number | number[]) {
    handleSelectedItem(String(value));
  }
  return (
    <Slider
      aria-label="Restricted values"
      defaultValue={0}
      // eslint-disable-next-line react/jsx-no-bind
      onChange={handleChange}
      // eslint-disable-next-line react/jsx-no-bind
      step={1}
      valueLabelDisplay="auto"
      marks={marks}
      sx={{
        height: "4px", // Slider의 높이 변경
        "& .MuiSlider-rail": {
          backgroundColor: isTheme.body.gray400, // Slider의 막대 색상 변경
        },
        "& .MuiSlider-mark": {
          width: "10px", // 동그란 점의 크기 변경
          height: "10px", // 동그란 점의 크기 변경
          borderRadius: "50%", // 동그란 점의 모양 변경
          backgroundColor: isTheme.body.gray400,
        },
        "& .MuiSlider-markActive": {
          backgroundColor: isTheme.body.primary,
        },
        "& .MuiSlider-markLabel": {
          color: isTheme.body.gray400, // Slider의 마커 색상 변경
          "&.MuiSlider-markLabel-active": {
            color: isTheme.body.gray400, // active 될 때 마커 색상 변경
          },
        },
        "& .MuiSlider-thumb": {
          backgroundColor: "#FFF", // thumb의 색상 변경
          border: `6px solid${isTheme.body.primary}`, // thumb의 테두리 변경
          "&:hover, &:focus, &.active": {
            boxShadow: "none", // thumb의 hover 효과 제거
          },
        },
      }}
    />

결과화면