연습 프로젝트를 진행하던 중에 슬라이더가 필요해서 관련 자료를 찾아보았다.

input태그에 대해서 공부하고 연습할 때 회원가입, 로그인 등에서 많이 쓰이는 타입인
password, email, text, radio 등에 대해서는 기억하고 있었는데 슬라이더를 만드는 range 타입에 대해서는 잊고 있었다.

범위 슬라이더

<input type="range" min="1" max="100" value="50"/>

기본적으로 input type에 range 값을 주면 위와 같은 회색 슬라이더를 만들 수 있다.

min, max, value는 각각 최솟값, 최댓값, 현재값을 나타낸다

CSS

슬라이더의 색상을 바꿔보고 싶어서 일단 color, background-color를 지정해 봤다.

<input class="colorChange" type="range"/>

.colorChange {
  color : red;
  background-color :green;
}

다른 엘리먼트처럼 color, background-color를 적용하면 슬라이더 색상이 바뀔 줄 알았는데...
엥? 변화가 없다.

찾아보니 accent-color 속성을 이용하면 된다고 한다.

.colorChange {
  accent-color : #DFD3C3;
}

이처럼 적용하면

슬라이더의 색상이 변경된걸 볼 수 있다!
슬라이더 배경색은 슬라이더 색상에 따라 자동으로 보색이 되게 바뀌는것 같다.

기존에는 -webkit-appearance: none속성을 이용하여 네이티브 설정값을 초기화 해야 색상을 변경할 수 있었지만 색상뿐만 아니라 기본적인 상호작용 등도 전부 없어져서 번거로웠는데
accent-color속성이 추가되면서 편하게 변경할 수 있다.
단, 테두리나 배경색 등을 완전히 커스텀하고 싶다면 appearance속성을 이용하여 기본값을 전부 밀어버리고 css를 할당해야 한다.

event

슬라이더의 값을 핸들링하기 위해서는 onChange와 onInput 두가지가 있다.

onChange는 마우스 커서가 슬라이더에서 떼지는 시점을 기준으로 이벤트를 발생시키고
onInput은 마우스 커서가 움직일 때마다 이벤트를 발생시킨다.