Styling for range type input HTML Element

• range 타입의 input HTML 엘리먼트는 thumb와 track으로 구성되며, 브라우저마다 외형이 다르기 때문에 벤더 프리픽스를 사용하여 스타일을 커스터마이징해야 한다.

• 크롬, 사파리, 엣지 브라우저는 특정 수도 엘리먼트를 사용하며, 파이어폭스는 3개의 수도 엘리먼트를 지원하지만 표준이 아님을 주의해야 한다.

• 슬라이더의 각 스텝마다 다른 색상을 적용하고, 값 위치에 작은 표시를 추가하기 위해 HTML과 CSS를 사용하여 스타일을 정의한다.

• JavaScript를 통해 값이 변경될 때마다 dots 레이어와 input 엘리먼트의 스타일을 동적으로 제어한다.