[TIL] React Howler 재생바 넓이

React Howler 라이브러리를 사용할 때, hover 상태에서 재생바의 넓이도 넓어지게 해보자

 

React Howler 예제🔽

audio player

 

기존 css 값을 조절해봤을 때, 결과는 다음과 같다

 

1. seek_controller & seek-slider & audioState 

셋의 height 값을 모두 조절하면 초록색 재생바가 넓어짐 (동그라미 중앙)

 

2. seek-slider::-webkit-slider-runnable-track

height 값을 조절하면 배경 재생바가 위로 넓어짐 (동그라미 최상단으로 올라감)

 

3. seek-slider::-webkit-slider-thumb

margin-top을 줘서 최상단으로 올라간 동그라미가 중앙에 있는 것처럼 보이게 했다

 

seek_controller를 제외한 나머지 요소들의 height 값을 0.375rem으로 주고,

seek_controller에 0.125rem에서 3배 정도 scaleY를 조절하는 transform을 적용했다

 

.seek_controller {
  position: relative;
  height: 0.125rem;
  transition: all 0.3s;
  transform: scaleY(0.33);
}
.seek_controller:hover {
  transform: scaleY(1);
}

그럭저럭 잘 구현 되었다!