range 입력 유형이란?
HTML의 <input type="range">는 사용자가 정해진 범위 안에서 값을 선택할 수 있도록 해주는 입력 요소입니다. 화면에는 주로 슬라이더(slider) 형태로 표시되며, 볼륨 조절, 밝기 설정, 평점 선택처럼 연속적인 수치를 입력받을 때 매우 유용합니다.
숫자 값에 제한을 두고 싶다면 min, max, step 속성을 함께 사용하면 됩니다. 별도의 설정 없이 사용할 경우 기본 범위는 0부터 100까지이며, 증감 단위는 1입니다.
주요 속성 정리
- min: 선택할 수 있는 최솟값
- max: 선택할 수 있는 최댓값
- step: 값이 증가하거나 감소하는 간격
- value: 슬라이더의 초기값 (지정하지 않으면 범위의 중간값)
예제
다음 코드를 실행하면 HTML에서 range 입력 유형을 사용하는 방법을 직접 확인할 수 있습니다. 범위는 슬라이더 형태로 화면에 나타납니다.
<!DOCTYPE html> <html> <head> <title>HTML input range</title> </head> <body> <form action = "" method = "get"> 소프트웨어 설치가 중단된 지점을 알려주세요 :<br><br> <input type = "range" name = "point" min = "0" max = "50"><br> <input type = "submit" value = "Submit"> </form> </body> </html>
위 예제에서는 min="0", max="50"으로 설정하여 0부터 50 사이의 값만 선택할 수 있는 슬라이더를 만들었습니다. 사용자가 슬라이더를 움직여 원하는 값을 고른 뒤 Submit 버튼을 누르면, point라는 이름으로 선택한 값이 서버에 전송됩니다.