HTML range 입력: 슬라이더 범위·간격과 현재 값 표시

HTML의 input type="range"는 정해진 범위의 숫자를 슬라이더로 선택하는 입력 요소입니다. min·max·step으로 범위와 간격을 정하고 value로 초기값을 지정합니다. 볼륨·밝기처럼 상대적인 정도를 조절하기에 적합하며, 현재 숫자를 보여 주려면 별도의 출력 요소와 JavaScript를 사용할 수 있습니다.

범위와 기본값 이해하기

range에는 빈 값이 없습니다. 값을 지정하지 않았다는 이유로 “아직 선택하지 않음” 상태가 되지 않으며 required도 적용되지 않습니다. 처음 선택 여부가 중요한 설문이라면 명시적인 선택 항목이나 다른 입력 방식을 검토하세요.

간격은 기준값부터 계산합니다. 예를 들어 min="16" max="32" step="2"는 16, 18, 20부터 32까지 선택하게 합니다. 범위나 간격에 맞지 않는 초기값은 브라우저가 보정할 수 있으므로 의도한 초기값이 실제 value와 일치하는지 확인하는 것이 좋습니다.

글자 크기를 실시간으로 바꾸는 전체 예제

다음 코드를 range.html로 저장해 브라우저에서 여세요. 별도 서버나 라이브러리가 필요하지 않습니다. 슬라이더로 예제 문장의 글자 크기를 16~32px 사이에서 2px 단위로 조절하며, 폼 제출 대신 실제 전송 대상 값을 화면에 표시합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>range로 글자 크기 조절</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin-bottom: 12px; }
    input[type="range"] { width: 20rem; max-width: 100%; accent-color: #1769aa; }
    #preview { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>글자 크기 조절</h1>
  <form id="demo">
    <label for="fontSize">예제 글자 크기 (16~32px, 2px 단위)</label>
    <input id="fontSize" name="fontSize" type="range"
      min="16" max="32" step="2" value="20">
    <p>현재 크기: <output id="selected" for="fontSize">20</output>px</p>
    <p><button type="submit">전송 값 확인</button>
      <button type="reset">초기화</button></p>
  </form>
  <p id="preview">슬라이더를 움직이면 이 문장의 글자 크기가 바뀝니다.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const slider = document.querySelector('#fontSize');
    const selected = document.querySelector('#selected');
    const preview = document.querySelector('#preview');
    const result = document.querySelector('#result');
    function update() {
      selected.value = slider.value;
      preview.style.fontSize = `${slider.valueAsNumber}px`;
      result.textContent = '';
    }
    slider.addEventListener('input', update);
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => {
      requestAnimationFrame(update);
    });
    update();
  </script>
</body>
</html>

1. 처음에는 현재 크기 20px와 해당 크기의 문장이 표시됩니다. 전송 값 확인을 누르면 fontSize 이름의 문자열 값 "20"이 나옵니다.
2. 슬라이더를 마우스나 터치로 움직여 숫자와 문장 크기가 함께 바뀌는지 확인하세요. 키보드 Tab으로 슬라이더에 이동한 뒤 방향키로도 조절해 봅니다.
3. 예를 들어 오른쪽 방향키로 20에서 22로 올리면 숫자도 22, 글자 크기도 22px가 됩니다. 다시 제출하면 결과는 "22"입니다.
4. 초기화를 누르면 슬라이더·표시 숫자·문장 크기가 모두 20으로 돌아갑니다. reset 이벤트에서 다음 화면 갱신 시점에 update를 실행하는 것은 기본 초기화가 반영된 값을 읽기 위해서입니다.

이 예제는 input 이벤트를 사용하여 조절 중에도 즉시 갱신합니다. 조절이 확정되는 시점에 처리하려면 change 이벤트를 검토할 수 있습니다. 두 이벤트는 실행 시점과 목적이 다르므로 실시간 미리보기에 필요한지에 따라 선택하세요.

현재 값·전송 값·초기값 구분

slider.value는 현재 숫자의 문자열이고 slider.valueAsNumber는 숫자입니다. HTML의 value 속성은 초기값이며 사용자가 슬라이더를 움직였다고 그 속성 문자열까지 같은 값으로 바뀌지는 않습니다. 현재 값을 표시하거나 저장할 때는 요소의 현재 value를 읽으세요.

output은 계산·선택 결과를 표시하는 요소이며 폼 전송 항목을 대신하지 않습니다. 예제의 전송 데이터는 이름이 있는 range에서 나옵니다. 서버에 실제로 저장하려면 존재하는 처리 경로와 요청 처리가 필요하며, 서버에서도 허용 범위와 간격을 검증해야 합니다.

number와의 선택 기준 및 화면 확인

정확한 수량·금액·길이를 직접 입력해야 한다면 number 입력의 범위와 간격 설정을 검토하세요. 슬라이더는 대략적인 정도를 빠르게 조절하기에 좋지만, 좁은 화면에서 정확한 숫자를 집어 선택하기는 어려울 수 있습니다. 정확한 값도 필요하면 숫자 입력을 함께 제공하고 두 값을 동기화하는 설계를 사용할 수 있습니다.

accent-color는 기본 슬라이더의 강조 색을 바꾸는 데 유용합니다. 모든 부분이 똑같이 칠해지는 것은 아니며 브라우저와 운영체제에 따라 모양이 달라질 수 있습니다. 모바일 너비, 충분한 조작 공간, 레이블 연결, 키보드 포커스와 숫자 표시를 함께 점검하세요.

기본값과 속성 지원 범위는 MDN range 입력 문서에서 확인할 수 있습니다.