[React] 🎧react-range 사용법

▷ react-range

input range를 대신해서 사용 할 수 있는 라이브러리이다.

(input range를 사용하면 왼쪽 부분을 칠해줄 수가 없었는데,
react-range를 사용해서 왼쪽 부분을 칠해줄 수 있게 되었다.)

🎧 설치

npm install react-range

🎧 예시 코드

import { Range } from 'react-range'; // Range 가져오기
...
......
return (
  <StyledRange // Range
    values={[volume]}
    step={1}
    min={0}
    max={100}
    onChange={handleVolumeChange}
    renderTrack={({ props, children }) => ( // renderTrack => 가로 바
      <Track {...props} values={[volume]}>
        {children}
      </Track>
    )}
    // renderThumb => 음량 조절 동그라미
    renderThumb={({ props, isDragged }) => <Thumb {...props} isDragged={isDragged} volume={[volume]} />}
  />
);

styled-components

// Range
const StyledRange = styled(Range)`
  height: 8px;
  display: flex;
  width: 400px;
`;

// 가로 바
const Track = styled.div`
  height: 8px;
  width: 400px;
  border-radius: 5px;
  background: linear-gradient(
    to right,
    #5d7a80,
    #2f7381 ${({ values }) => (values[0] / 100) * 100}%,
    #131c23 ${({ values }) => (values[0] / 100) * 100}%
  );
  align-self: center;
  box-shadow: 2px 2px 5px rgba(122, 153, 164, 0.2);
`;

// 음량 조절 동그라미
const Thumb = styled.div`
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: ${({ isDragged }) =>
    isDragged ? 'radial-gradient(ellipse at top, #9abfcd, #4f98a6);' : 'radial-gradient(ellipse at top, #7a99a4, #2f7381);'};
  display: flex;
  align-items: center;
  box-shadow: 0 2px 5px rgba(19, 28, 35, 0.2);
  transform: translateX(-50%);
  left: ${({ value, min, max }) => `${((value - min) / (max - min)) * 100}%`};
  top: 0px;
  position: absolute;

  &:focus {
    outline: none;
  }
`;