[CSS] input type = "range" | 볼륨조절바 만들기

# input type = "range" 란 ?

HTML input type="range"

우측처럼 범위를 나타내는 슬라이더를 생성하고 싶을 때 input type="range" 를 사용할 수 있다.

input 태그의 타입이 "range" 인 경우, min, max, step, value 속성을 사용하여 슬라이더의 범위와 간격을 지정해줄 수 있다.

예컨대, 볼륨조절바를 만들고자 하는 경우라면

다음의 속성들을 조정해서 원하는 결과를 만들 수 있다.

min : 최소 볼륨값

max : 최대 볼륨값

step : 슬라이더 움직이는 간격 (Ex. step을 0.1 로 설정했다면 슬라이더 조절시 0.1 씩 볼륨값이 조절된다.)

value : 슬라이더의 초기값 (초기값으로 1을 가지며, 범위 내의 유효한 값으로 설정해야 한다.)

 -> value 속성은 min과 max 속성 사이의 값으로 설정되기때문에 슬라이더의 min과 max 속성을 벗어나는 값으로 설정하는 경우 브라우저상에 에러가 표시된다.

 

위 속성들은 type="range"인 경우에만 의미를 가지며, 다른 type 값(예: text, checkbox, radio 등)을 사용한 경우에는 무시된다.

 

# 설정한 볼륨값에 따라 오디오 볼륨 조절하는 방법

// 볼륨 조절 이벤트 처리
  volumeRange.on("input", function () {
    const volume = $(this).val();
    audio.volume = volume;
  });

type= "range" 지정된 input 태그를 volumeRange 라는 변수에 할당해주고,

해당 변수에 input 이벤트를 걸어주면 볼륨조절바를 조정했을 때 해당 슬라이더의 현재 값이 이벤트핸들러에 전달된다.

여기서는 일반함수 구역이므로 $(this).val() 로 이벤트핸들러에 전달된 현재 볼륨값을 volume이란 변수에 담아줬다.

그러면 내가 볼륨조절바를 조절할때마다 실시간으로 값이 반영되어 나타난다.

min="0", max="1" 로 준 상황이라면, 좌우 양끝의 값의 범위는 0~1 이 될 것이고,

내가 볼륨조절바를 중간에서 조절할때마다 콘솔창에 해당 값을 찍어보면 0.45, 0.72,.. 이런 값이 찍힐 거다.

그리고 그 값을 audio.volue = volume 하여 오디오 볼륨값을 해당 값으로 실시간 반영 시켜준다.

 

** 관련해서 찾아보다가 volumechange 라는 이벤트도 알게됐는데

이 이벤트는 볼륨조절바의 값이 변경됐을 때 발생하는 이벤트여서, 볼륨조절바를 조작하는 동안에 실시간으로 볼륨을 조절하기엔 다소 어려움이 있어보였다.

 

이번에 볼륨조절바를 만들면서 새로운 이벤트들을 덕분에 많이 알게되어 뿌듯하다 ^_^