단순 사각형 2개를 만들어서 하는게 아닌 input태그를 사용하면 가능하지 않을까 생각하고 찾아봤다.

input[type='range']

기본 모양의 input [type='range']

<input type="range">

이걸 이용해서

이 스크롤을 만들어 보자.

우선 기본 스타일 적용 되어있는것을 리셋(초기화) 시켜줘야 한다.

input[type='range'] { -webkit-appearance: none; } 은 컨트롤 할 수 있는 동그란 구 모양을 없애며,

input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; } 이 코드는 기다란 바를 없앤다.

이렇게 기본 모양의 바를 초기화 해준다면 아무것도 남지 않는다. 이 상태에서 스타일링을 해주어야 스타일링이 가능하다.

참고 자료 : https://okayoon.tistory.com/entry/input-%ED%83%80%EC%9E%85-range-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%88%98%EC%A0%95%ED%95%98%EA%B8%B0%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%8A%A4%ED%83%80%EC%9D%BC