HTML의 step 속성은 입력 필드에 허용되는 숫자 간격을 지정합니다. 예를 들어 step이 2로 설정되면 2, 4, 6, 8, 10처럼 일정한 간격의 값만 유효한 입력으로 인정됩니다. 이 속성은 min(최솟값)과 max(최댓값) 속성과 함께 사용하여 유효한 값의 범위를 정의할 수 있습니다.
하나의 range 입력에서 값의 구간에 따라 서로 다른 step을 적용하려면 JavaScript 또는 jQuery를 활용해야 합니다. 먼저 기본적인 step 속성의 사용법부터 살펴보겠습니다.
step 속성 기본 사용법
아래 코드를 실행하면 입력 간격이 2인 숫자 입력 필드를 만들 수 있습니다. 따라서 유효한 입력값은 2, 4, 6, 8, 10 등입니다. 이 외의 값을 입력한 뒤 제출 버튼을 누르면 “Please enter a valid value(유효한 값을 입력하세요)”라는 메시지가 표시되며, 가장 가까운 두 개의 유효한 값도 함께 안내됩니다.
<!DOCTYPE html> <html> <head> <title>HTML input step attribute</title> </head> <body> <form action = "/cgi-bin/hello_get.cgi" method = "get"> <input type = "number" name = "points" step = "2"><br> <input type = "submit" value = "Submit"> </form> </body> </html>
jQuery로 하나의 range 입력에 서로 다른 step 적용하기
슬라이더 값의 구간에 따라 step을 동적으로 변경하려면 jQuery를 사용하면 됩니다. 아래 예제에서는 두 가지 step, 즉 10과 2를 사용합니다. range의 전체 범위는 min과 max 속성으로 설정된 100부터 450까지입니다.
동작 원리는 간단합니다. 슬라이더 값이 205 미만이면 step이 10으로 설정되고, 205 이상이면 step이 2로 변경됩니다. 'input'과 'change' 이벤트를 감시하여 값이 바뀔 때마다 step 속성이 실시간으로 갱신되며, 현재 값과 적용 중인 step이 화면에 함께 표시됩니다. 이처럼 조건문만 수정하면 원하는 구간별 간격 규칙을 자유롭게 정의할 수 있습니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$('#points').on('input change', function() {
var element = $('#points'),
value = element.val(),
step;
// 여기에 규칙을 설정합니다
if (value < 205) {
step = 10;
}else {
step = 2;
}
element.attr('step', step);
$('#value').text(value);
$('#step').text(step);
});
});
</script>
</head>
<body>
<div>
Value: <span id="value"></span>
</div>
<div>
Current step: <span id="step"></span>
</div>
<div>
<input id="points" type="range" value="100" min="100" max="450" />
</div>
</body>
</html>