HTML <input type=”range”> – 올바른 이해와 사용 방법

`<input type="range">`

<input> 태그의 type="range"는 사용자가 설정된 숫자 범위 내에서 값을 선택할 수 있도록
일반적으로 슬라이더 형태의 컨트롤로 제공되는 입력 필드를 나타냅니다.

숫자의 허용 범위를 설정하거나, 숫자 값의 증감 간격을 지정하는 등의 다양한 속성을 제공합니다.

그러나, 특정한 숫자 값을 정확하게 선택하기에는 한계가 있으므로, 컨트롤의 정확한 값이 중요하지 않은 경우에만 사용해야 합니다.

특정 숫자 값을 정확하게 선택해야 하는 경우에는 <input type="number">를 사용하는 것이 더 적합합니다

기본 예제

슬러이더 형태의 인터페이스는 브라우저와 운영 체제에 따라 다르게 표시될 수 있습니다.

관련 속성 사용하기

<input type="range">의 관련된 속성에 대해 알아보겠습니다.
다음은 모든 <input> 태그에 공통으로 사용되는 여러 가지 속성 외에도, 다음의 속성을 추가로 지원합니다.

input tpe="range"의 관련 속성
속성	설명
`min`	허용된 범위에서 선택할 수 있는 숫자의 가장 작은 값을 지정합니다.
`max`	허용된 범위에서 선택할 수 있는 숫자의 가장 큰 값을 지정합니다.
`step`	숫자 값의 증감 간격을 지정합니다. 숫자 값을 가집니다.
`value`	필드에서 선택된 숫자의 초깃값을 지정합니다. 숫자 값을 가집니다.

`min` 속성

min 속성은 허용된 범위에서 선택할 수 있는 숫자의 가장 작은 값을 지정합니다.
기본값은 0입니다. 유효한 숫자가 아닌 값이 지정된 경우에는 min 속성의 값이 지정되지 않습니다.

음수값 사용

min 속성에는 음수값을 사용할 수 있습니다.

주의할 점

max 속성이 지정되어 있다면 min 속성의 값은 max 속성의 값보다 작아야 합니다. 그렇지 않으면, 사용자는 허용 범위와 상호 작용할 수 없습니다.

이때 주의할 점은 max 속성을 지정하지 않으면 기본값이 100으로 지정된다는 것입니다. 이 경우, min 속성의 값은 100보다 작아야 합니다.

HTML

<label for="volume">볼륨</label>

<!-- max 속성이 지정되어 있지 않으면
     기본값이 100으로 지정되기 때문에
     min 속성의 값은 100보다 작아야 합니다. -->
<input type="range" id="volume" min="200"> <!-- min이 max 100보다 큰
                                                잘못 설정된 값 -->

`max` 속성

max 속성은 허용된 범위에서 선택할 수 있는 숫자의 가장 큰 값을 지정합니다.
기본값은 100입니다. 유효한 숫자가 아닌 값이 지정된 경우에는 max 속성의 값이 지정되지 않습니다.

음수값 사용

max 속성에는 음수값을 사용할 수 있습니다.

주의할 점

min 속성이 지정되어 있다면 max 속성의 값은 min 속성의 값보다 커야 합니다. 그렇지 않으면, 사용자는 허용 범위와 상호 작용할 수 없습니다.

이때 주의할 점은 min 속성을 지정하지 않으면 기본값이 0으로 지정된다는 것입니다. 이 경우, max 속성의 값은 0보다 커야 합니다.

HTML

<label for="volume">볼륨</label>

<!-- min 속성이 지정되어 있지 않으면
     기본값이 0으로 지정되기 때문에
     max 속성의 값은 0보다 커야 합니다. -->
<input type="range" id="volume" max="-100"> <!-- max가 min 0보다 작은
                                                잘못 설정된 값 -->

`step` 속성

숫자 값의 증감 간격을 지정합니다. 숫자 값을 가집니다.
step 속성이 지정되어 있지 않을 경우 step 속성 속성의 기본 값은 1입니다.

`value` 속성

필드에서 선택된 숫자의 초깃값을 지정합니다. 숫자 값을 가집니다.
값은 빈 문자열("")이 될 수 없습니다.

value 속성이 지정되어 있지 않으면 기본값은 지정된 min 값과 max 값의 중간입니다

그리고, min 값보다 작은 값을 설정하려고 하면 min 값으로 설정되됩니다.

마찬가지로 max 값보다 큰 값을 설정하려고 하면 max 값으로 설정됩니다.

값 표시하기

<input type="range">에 값을 표시할 수 있습니다.
현재 값을 사용자에게 실시간으로 표시하는 방법을 다룰 수 있습니다. 이를 통해 사용자는 슬라이더를 움직일 때마다 선택한 숫자 값을 즉시 확인할 수 있습니다.

<input type="range">는 슬라이더 형태의 인터페이스를 통해 숫자 범위 내의 값을 선택할 수 있습니다. 그러나 슬라이더만으로는 현재 값이 정확히 표시되지 않기 때문에, 사용자에게 선택된 값을 별도로 표시하는 것이 좋습니다. 이를 위해 <output> 태그와 자바스크립트를 함께 사용하여 실시간으로 값을 업데이트할 수 있습니다.

부연설명
<output> 태그는 웹 애플리케이션이 수행한 계산 결과나, 사용자의 웹 양식 관련 컨트롤을 통한 다양한 상호작용의 결과에 대한 출력(output)을 나타냅니다.

예제 코드

다음은 슬라이더의 값을 <output> 태그에 실시간으로 표시하는 예제입니다.

HTML

<label for="volume">볼륨</label>
<input type="range" id="volume" min="0" max="100">
<p style="color: red;">값: <output for="volume" id="volume-output"></output></p>

<!-- 자바스크립트 사용 -->
<script>
    const value = document.querySelector("#volume-output");
    const input = document.querySelector("#volume");
    value.textContent = input.value;
    input.addEventListener("input", (event) => {
      value.textContent = event.target.value;
    });
</script>

눈금 표시하기

<input type="range">에 눈금을 표시할 수 있습니다.
눈금을 표시하면 사용자가 슬라이더의 값 선택 범위를 더 쉽게 파악할 수 있습니다. 눈금은 슬라이더의 값 범위를 일정한 간격으로 나누어, 각 값의 위치를 시각적으로 보여주는 표시선입니다. 이는 특히 값이 많은 범위에 걸쳐 있거나 정확한 위치를 선택해야 할 때 유용합니다.

기본적인 사용법

다음의 설명은 HTML 표준에 따른 눈금 표시 방식입니다.

<input type="range">에 눈금을 추가하는 공식적인 방법은 list 속성을 사용하여 <datalist> 태그와 연결하는 것입니다. list 속성의 값으로 연결하려는 <datalist> 태그의 id 속성의 값을 사용합니다.

<datalist> 태그 안에는 슬라이더의 특정 위치에 눈금을 추가하기 위해 <option> 태그를 사용해 각 눈금의 값을 정의합니다.

예제 코드

다음은 list 속성과 <datalist> 태그를 사용하여 슬라이더에 눈금을 추가하는 예제입니다.

HTML

<label for="volume">볼륨</label>

<!-- list 속성으로 datalist 태그 연결 -->
<input type="range"
    id="volume"
    min="0"
    max="100"
    step="25"
    value="50"
    list="markers">

<!-- 눈금 표시 -->
<datalist id="markers">
    <option value="0"></option>
    <option value="25"></option>
    <option value="50"></option>
    <option value="75"></option>
    <option value="100"></option>
</datalist>

눈금에 레이블 표시하기

눈금에 레이블(이름표)를 표시하려면 <option> 태그의 콘텐츠에 레이블에 사용할 텍스트를 추가하는 것입니다.

HTML

<div class="control-container">
    <label for="volume">볼륨</label>
    <div class="control">
        <input type="range"
            id="volume"
            min="0"
            max="100"
            step="25"
            value="50"
            list="markers">
        <datalist id="markers">
            <option value="0">끔</option>
            <option value="25">작게</option>
            <option value="50">보통</option>
            <option value="75">크게</option>
            <option value="100">매우 크게</option>
        </datalist>
    </div>
</div>

또 다른 방법으로 <option> 태그에 label 속성의 값으로 레이블에 사용할 텍스트를 추가하는 것입니다.

HTML

<datalist id="markers">
    <option value="0">끔</option>
    <option value="25">작게</option>
    <option value="50">보통</option>
    <option value="75">크게</option>
    <option value="100">매우 크게</option>
</datalist>

<!-- 위와 아래는 동일하게 작동합니다. -->

<datalist id="markers">
    <option value="0" label="끔"></option>
    <option value="25" label="작게"></option>
    <option value="50" label="보통"></option>
    <option value="75" label="크게"></option>
    <option value="100" label="매우 크게"></option>
</datalist>

그러나 레이블 내용은 기본적으로 표시되지 않습니다. CSS를 사용하여 레이블을 표시하고 올바르게 배치할 수 있습니다. 이를 수행할 수 있는 한 가지 방법은 다음과 같습니다.

CSS

/* 슬라이더 컨트롤과 레이블을 감싸는 컨테이너로,
   수평 방향으로 배치합니다. */
.control-container {
    display: flex;
}

/* 레이블과 슬라이더 사이에 적당한 간격을 둡니다 */
label + .control {
    margin-left: 1em;
}

/* datalist 요소에 스타일을 적용해
   눈금과 레이블을 슬라이더에 맞춰 배치합니다. */
datalist {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    writing-mode: vertical-lr; /* 눈금 레이블의 텍스트를 수직 방향으로 표시 */
    width: 200px;
}

/* 각 눈금 레이블의 기본 패딩을 제거하고,
   작은 글씨 크기를 적용합니다. */
option {
    padding: 0; /* 불필요한 패딩을 제거해 레이블 정렬을 개선 */
    font-size: smaller;
}

/* 슬라이더 너비를 datalist와 일치시켜
   눈금과 정렬을 맞춥니다. */
input[type="range"] {
    width: 200px;
    margin: 0;
}

수직(세로)으로 된 슬라이더 표시

<input type="range">를 수직(세로)으로 표시할 수 있습니다.
기본적으로 브라우저는 <input type="range"> 수평으로 표시하며 손잡이(knob)는 좌우로 움직입니다.

이것을 수직(세로)으로 표시하려면 CSS의 writing-mode 속성의 값을 vertical-lr로 지정하면 됩니다. (오른쪽에서 왼쪽 방향으로 글을 작성하는 언어는 vertical-rl로 지정합니다.)

커스텀 스타일하기

CSS로 input type range 커스텀 스타일하기를 참고하세요.

접근성 고려사항

<input type="range">를 사용할 때에는 <label>을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.

브라우저 호환성

input type 속성의 ramge 값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<input type="range">`	4	12	23	3.1
눈금 표시 지원	67	79	109	12.1
수직으로 된 슬라이더 표시	124	12	120	16.5

명세서

input type 속성의 range 값에 대한 명세서 사양
명세서 사양
`<input type="range">`	HTML Standard #range-state-(type=range)

참고문헌

MDN - <input type="range">

<input type="range">

기본 예제

관련 속성 사용하기

min 속성

음수값 사용

주의할 점

max 속성

음수값 사용

주의할 점

step 속성

value 속성

값 표시하기

예제 코드

눈금 표시하기

기본적인 사용법

예제 코드

눈금에 레이블 표시하기

수직(세로)으로 된 슬라이더 표시

커스텀 스타일하기

접근성 고려사항

브라우저 호환성

명세서

참고문헌

같이 보기

`<input type="range">`

`min` 속성

`max` 속성

`step` 속성

`value` 속성