1. 사용하게된 이유

위 그림과 같이 구현을 하고 싶어 찾아보던중 서치를 시크바 라고 해서 그런지 계속 안드로이드와 IOS에서 구현이 가능한 react-native 관련 얘기만 나왔고 저런 형태를 시크바라고 안드로이드에서 불려서 그런거 같다.

오픈톡방인 개발바닥에 질문을 한 결과 프레임워크를 사용하면 된다는 답이 있어서 MUI프레임워크를 찾게 되었다.

- MUI를 고른이유

크게 없고 styled-components를 많이 써서 호환이 되는게 무엇이 있을까 찾아보다가 MUI는 emotion이지만 호환이 가능하다 하여 사용하게 되었다.

import Slider from '@mui/material/Slider';
import { styled } from 'styled-components';

...
...
...

const DistanceSlider = styled(Slider)`
  margin-left: 10px;
  width: 360px;

  .MuiSlider-thumb {
    color: white;
  }
  .MuiSlider-rail {
    color: #cccccc;
  }
  .MuiSlider-track {
    color: #a0a0a0;
  }
  color: #a0a0a0;
`;

위와 같이 styled(여기) 괄호안에 넣어주면 된다.

2. 설치 방법

//npm
npm install @mui/material @emotion/react @emotion/styled

//yarn
yarn add @mui/material @emotion/react @emotion/styled

3. MUI slider 설명

MUI slider 공식문서-사이트

내가 사용하고 싶은건 간격을 조절할 수 있는 슬라이더 바를 원하는 거였다.
Range slider가 내가 생각한 바 모형이였기에 이부분을 채택하였다.

• 설명이 잘 나와있어 일단 공식문서 그대로 복붙을 하였다.

기본 Range Slider

import * as React from 'react';
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';

function valuetext(value: number) {
  return `${value}°C`;
}

export default function RangeSlider() {
  const [value, setValue] = React.useState<number[]>([20, 37]);

  const handleChange = (event: Event, newValue: number | number[]) => {
    setValue(newValue as number[]);
  };

  return (
    <Box sx={{ width: 300 }}>
      <Slider
        getAriaLabel={() => 'Temperature range'}
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
      />
    </Box>
  );
}

원하는 칸으로 나누기

• 하지만 나는 단계적으로 나뉘어 있는 바를 원했기 때문에 기본 모양과는 다른 옵션을 주어야 했다.

...
const marks = [
    {
      value: 0,
      label: '0km',
    },
    {
      value: 1,
    },
    {
      value: 2,
      label: '3km',
    },
    {
      value: 3,
    },
    {
      value: 4,
      label: '6km',
    },
  ];
...


		<DistanceSlider
          aria-labelledby="range-slider"
          marks={marks}
          max={4}
          min={0}
          value={value}
          onChange={handleChange}
        />

위와 같이 marks를 배열안에 객체형식으로 만들어준후 옵션에 추가해주면 된다.
그리고 max값과 min값을 정해주어 내가 원하는 칸만 보이게 정해주었다.

처음 값 정해주기

• 동그라미 두개가 0번쨰와 1번째에 표시하기
  useState를 통해서 초기값을 정해준후 value를 설정해주면 된다.

...

const [value, setValue] = useState<number[]>([0, 1]);

...

		<DistanceSlider
          aria-labelledby="range-slider"
          marks={marks}
          max={4}
          min={0}
          value={value}
          onChange={handleChange}
        />

값 가져오기

• onChange이벤트가 있는데 연결된 함수에 newValue값으로 체인지 곧 변화가 될때마다 데이터를 가져올 수 있다.

...

const handleChange = (event: Event, newValue: number | number[]) => {
    //조건문으로 0 ~ 4 면 km로 변환시키기
    console.log(newValue);
    setValue(newValue as number[]);
  };

...


<DistanceSlider
          aria-labelledby="range-slider"
          marks={marks}
          max={4}
          min={0}
          value={value}
          onChange={handleChange}
        />

MUI-styled-components 참고 블로그
MUI-Range-slider 참고 블로그