HTML / input / range / 범위 내의 숫자를 선택하게 하는 양식
개요
- type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식이다.
- 슬라이드로 값을 선택한다.
문법
<input type="range" min="x" max="x" step="x" value="x">
- min : 최솟값으로, 기본값은 0이다.
- max : 최댓값으로, 기본값은 100이다.
- step : 숫자들 사이의 간격으로, 기본값은 1이다.
- value : 초기값으로, min과 max의 평균이다.
예제
Submit을 클릭하면 URL에서 값을 확인할 수 있다. 아래 상태 그대로 전송하면 URL 뒤에 아래와 같은 값이 붙는다.
?a=50&b=100&c=60&d=400
- A
min : 0
max : 100
step : 1
value : 50 - B
min : 0
max : 1000
step : 1
value : 100 - C
min : 50
max : 100
step : 1
value : 60 - D
min : 0
max : 1000
step : 20
value : 400
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-family: Consolas, monospace; } </style> </head> <body> <form method="get" action=""> <p> A <input type="range" name="a"> </p> <p> B <input type="range" name="b" max="1000" value="100"> </p> <p> C <input type="range" name="c" min="50" value="60"> </p> <p> D <input type="range" name="d" min="0" max="1000" step="20" value="400"> </p> <p> <input type="submit" value="Submit"> </p> </form> </body> </html>
색을 지정하고 싶다면 CSS의 accent-color
속성을 이용한다.