슬라이더: <input type='range'>

핵심 개념

소리 크기나 밝기 조절처럼 숫자를 왔다 갔다 하면서 조절하는 바를 만들 때 사용해요.

코드 분석

HTML5📋 코드 (3줄)

볼륨 조절 (0~100):
<input type='range' min='0' max='100' value='50' oninput='document.getElementById("val").innerText = this.value'>
<span id='val'>50</span>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 type='range' 슬라이더에서
접근성(aria-valuetext), 키보드 조작, 스타일 cross-browser 문제를 찾아 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

type='range'로 가격 필터, 음량 조절, 평점 입력을
실전 코드 3개로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 페이지의 range 슬라이더 구현 전체를 분석해서
모바일 터치 정밀도, 스타일링 한계,
접근성 점수를 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년에 type='range' 네이티브로 만든 슬라이더 vs
rc-slider 같은 라이브러리,
어떤 게 더 실무 친화적인지 평가해줘.

⭐ 이것만 기억하세요

슬라이더: <input type='range'>는 이 3가지만 확실히 잡으세요

1.숫자를 직접 입력받으면 범위 밖 값이 들어올 수 있고, 사용자가 적절한 값을 가늠하기 어렵습니다

2.type='range'는 min, max, step 속성으로 허용 범위를 정하고, 슬라이더 UI로 직관적 선택을 제공합니다

3.다음 챕터에서 입력 시 추천 목록을 보여주는 datalist 요소를 배웁니다

💬 이 챕터 질문 보기

HTML5 · CH.22 — 질문하거나 답변을 확인하세요

→

진행도 22 / 33

← 커리큘럼으로 ← 목록으로 (HTML5)