<input type="range">
<input>
태그의 type="range"
는 사용자가 설정된 숫자 범위 내에서 값을 선택할 수 있도록
일반적으로 슬라이더 형태의 컨트롤로 제공되는 입력 필드를 나타냅니다.
숫자의 허용 범위를 설정하거나, 숫자 값의 증감 간격을 지정하는 등의 다양한 속성을 제공합니다.
그러나, 특정한 숫자 값을 정확하게 선택하기에는 한계가 있으므로, 컨트롤의 정확한 값이 중요하지 않은 경우에만 사용해야 합니다.
특정 숫자 값을 정확하게 선택해야 하는 경우에는 <input type="number">
를 사용하는 것이 더 적합합니다
기본 예제
슬러이더 형태의 인터페이스는 브라우저와 운영 체제에 따라 다르게 표시될 수 있습니다.
관련 속성 사용하기
속성 | 설명 |
---|---|
min |
허용된 범위에서 선택할 수 있는 숫자의 가장 작은 값을 지정합니다. |
max |
허용된 범위에서 선택할 수 있는 숫자의 가장 큰 값을 지정합니다. |
step |
숫자 값의 증감 간격을 지정합니다. 숫자 값을 가집니다. |
value |
필드에서 선택된 숫자의 초깃값을 지정합니다. 숫자 값을 가집니다. |
min
속성
min
속성은 허용된 범위에서 선택할 수 있는 숫자의 가장 작은 값을 지정합니다.
기본값은 0
입니다. 유효한 숫자가 아닌 값이 지정된 경우에는 min
속성의 값이 지정되지 않습니다.
음수값 사용
min
속성에는 음수값을 사용할 수 있습니다.
주의할 점
max
속성이 지정되어 있다면 min
속성의 값은 max
속성의 값보다 작아야 합니다. 그렇지 않으면, 사용자는 허용 범위와 상호 작용할 수 없습니다.
이때 주의할 점은 max
속성을 지정하지 않으면 기본값이 100
으로 지정된다는 것입니다. 이 경우, min
속성의 값은 100
보다 작아야 합니다.
max
속성
max
속성은 허용된 범위에서 선택할 수 있는 숫자의 가장 큰 값을 지정합니다.
기본값은 100
입니다. 유효한 숫자가 아닌 값이 지정된 경우에는 max
속성의 값이 지정되지 않습니다.
음수값 사용
max
속성에는 음수값을 사용할 수 있습니다.
주의할 점
min
속성이 지정되어 있다면 max
속성의 값은 min
속성의 값보다 커야 합니다. 그렇지 않으면, 사용자는 허용 범위와 상호 작용할 수 없습니다.
이때 주의할 점은 min
속성을 지정하지 않으면 기본값이 0
으로 지정된다는 것입니다. 이 경우, max
속성의 값은 0
보다 커야 합니다.
step
속성
숫자 값의 증감 간격을 지정합니다. 숫자 값을 가집니다.
step
속성이 지정되어 있지 않을 경우 step
속성 속성의 기본 값은 1
입니다.
value
속성
필드에서 선택된 숫자의 초깃값을 지정합니다. 숫자 값을 가집니다.
값은 빈 문자열(""
)이 될 수 없습니다.
value
속성이 지정되어 있지 않으면 기본값은 지정된 min
값과 max
값의 중간입니다
그리고, min
값보다 작은 값을 설정하려고 하면 min
값으로 설정되됩니다.
마찬가지로 max
값보다 큰 값을 설정하려고 하면 max
값으로 설정됩니다.
값 표시하기
<input type="range">
에 값을 표시할 수 있습니다.
현재 값을 사용자에게 실시간으로 표시하는 방법을 다룰 수 있습니다. 이를 통해 사용자는 슬라이더를 움직일 때마다 선택한 숫자 값을 즉시 확인할 수 있습니다.
<input type="range">
는 슬라이더 형태의 인터페이스를 통해 숫자 범위 내의 값을 선택할 수 있습니다. 그러나 슬라이더만으로는 현재 값이 정확히 표시되지 않기 때문에, 사용자에게 선택된 값을 별도로 표시하는 것이 좋습니다. 이를 위해 <output>
태그와 자바스크립트를 함께 사용하여 실시간으로 값을 업데이트할 수 있습니다.
부연설명
<output>
태그는 웹 애플리케이션이 수행한 계산 결과나, 사용자의 웹 양식 관련 컨트롤을 통한 다양한 상호작용의 결과에 대한 출력(output)을 나타냅니다.
예제 코드
다음은 슬라이더의 값을 <output>
태그에 실시간으로 표시하는 예제입니다.
값:
눈금 표시하기
<input type="range">
에 눈금을 표시할 수 있습니다.
눈금을 표시하면 사용자가 슬라이더의 값 선택 범위를 더 쉽게 파악할 수 있습니다. 눈금은 슬라이더의 값 범위를 일정한 간격으로 나누어, 각 값의 위치를 시각적으로 보여주는 표시선입니다. 이는 특히 값이 많은 범위에 걸쳐 있거나 정확한 위치를 선택해야 할 때 유용합니다.
기본적인 사용법
다음의 설명은 HTML 표준에 따른 눈금 표시 방식입니다.
<input type="range">
에 눈금을 추가하는 공식적인 방법은 list
속성을 사용하여 <datalist>
태그와 연결하는 것입니다. list
속성의 값으로 연결하려는 <datalist>
태그의 id
속성의 값을 사용합니다.
<datalist>
태그 안에는 슬라이더의 특정 위치에 눈금을 추가하기 위해 <option>
태그를 사용해 각 눈금의 값을 정의합니다.
예제 코드
다음은 list
속성과 <datalist>
태그를 사용하여 슬라이더에 눈금을 추가하는 예제입니다.
눈금에 레이블 표시하기
눈금에 레이블(이름표)를 표시하려면 <option>
태그의 콘텐츠에 레이블에 사용할 텍스트를 추가하는 것입니다.
또 다른 방법으로 <option>
태그에 label
속성의 값으로 레이블에 사용할 텍스트를 추가하는 것입니다.
그러나 레이블 내용은 기본적으로 표시되지 않습니다. CSS를 사용하여 레이블을 표시하고 올바르게 배치할 수 있습니다. 이를 수행할 수 있는 한 가지 방법은 다음과 같습니다.
수직(세로)으로 된 슬라이더 표시
<input type="range">
를 수직(세로)으로 표시할 수 있습니다.
기본적으로 브라우저는 <input type="range">
수평으로 표시하며 손잡이(knob)는 좌우로 움직입니다.
이것을 수직(세로)으로 표시하려면 CSS의 writing-mode
속성의 값을 vertical-lr
로 지정하면 됩니다. (오른쪽에서 왼쪽 방향으로 글을 작성하는 언어는 vertical-rl
로 지정합니다.)
접근성 고려사항
<input type="range">
를 사용할 때에는 <label>
을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.
브라우저 호환성
속성 |
데스크탑 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">
|
HTML Standard #range-state-(type=range) |