input type range CSS 커스텀 하기

프로젝트 중에, input range 를 커스텀 해야했다.

- 만들고 싶은 화면

1. 기본 상태 리셋해주기

인풋 range의 기본 상태는 이런식으로 되어있는데, 크게 파랑색으로 색칠된 bar, 그리고 저 채워진 부분의 끝점을 나타내는 slider-thumb 두 부분으로 나뉘어져있다.

globalStyle("input[type='range']", {
  WebkitAppearance: "none",
});

저부분에서 appearance 부분을 none으로 해주면 막대가 사라지는걸 볼 수 있다.

globalStyle("::-webkit-slider-thumb", {
  WebkitAppearance: "none",
});

이 두분의 appearance를 다 none으로 해주면 초기 셋팅이 된다.

         <div className={volume_slider_container}>
            <div className={volume_slider_rail}></div>
            <div
              className={volume_slider_fill_track}
              style={{
                width: `${volume}%`,
              }}
            ></div>

            <input
              type={"range"}
              className={volume_input}
              min={0}
              max={100}
              value={volume}
              onChange={volumeHanlder}
            />
          </div>

전략은 인풋을 다 투명하게 만들고 그 위에 컨테이너 div, 전체 range를 나타내는 div, 채워질때의 div를 만들어서 겹쳐주는 것이다.

export const volume_slider_container = style({
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  width: "100%",
  height: "1rem",
  position: "relative",
});

export const volume_slider_rail = style({
  width: "100%",
  height: "0.2rem",
  zIndex: "-10",
  borderRadius: "2px",
  background: "#fff",
  position: "absolute",
  top: "calc(50% - 2px)",
});

export const volume_slider_fill_track = style({
  height: "0.2rem",
  borderRadius: "2px",
  background: "#000",
  position: "absolute",
  top: "calc(50% - 2px)",
  left: "0",
});

export const volume_input = style({
  width: "100%",
  height: "3rem",
  background: "transparent",
  margin: "0",
  cursor: "pointer",
});

- 완성 화면

문제는 현재 hover할때 정중앙에서 저 thumb 아이콘이 커지지 않는데, 이 부분은 더 고민 해보아야할것 같다.