jQuery Mobile 레인지 슬라이더 — input type=range 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 레인지 슬라이더 —
input type="range" 완전 정리

막대를 좌우로 끌어 숫자를 입력하는 위젯

시작 오늘 분석할 코드

HTML5의 type="range"를 fieldcontain으로 감싼 단순 코드다. jQM이 자동으로 막대 + 동그라미 + 숫자 입력칸이 결합된 슬라이더 위젯을 만들어 준다.

<div data-role="fieldcontain"> <label for="score1">점수</label> <input type="range" name="score" id="score1" value="50" min="0" max="100"/> </div>

실제 출력 미리보기

header 영역

점수

 

 

50

footer 영역

---

용어 핵심 키워드

type="range"HTML5 슬라이더 입력 — 숫자를 막대로 입력

min/max허용 범위 — 끝점 두 값

value현재 값 = 초기값 = 위치

step증감 단위 (생략 시 1)

---

1 jQM이 만들어 주는 것

일반 type="range"는 OS마다 다르게 보인다. jQM은 일관된 디자인으로 다음을 추가한다.

• 좌우로 긴 막대(track) + 진한 색의 채워진 부분 + 동그란 손잡이(knob)
• 막대 오른쪽에 현재 값을 보여주는 작은 입력칸 — 직접 숫자 타이핑 가능
• 드래그/터치로 손잡이 이동, 키보드 좌우 화살표로도 변경

⚙ 두 가지 입력 방법 — 드래그(직관적·빠름)와 타이핑(정확). jQM은 둘을 동시에 제공한다.

---

2 min/max/value의 관계

세 속성이 슬라이더의 범위와 위치를 결정한다.

속성	역할	본 코드 값
min	왼쪽 끝점 — 최소값	0
max	오른쪽 끝점 — 최대값	100
value	초기 위치 (중간이 50)	50

⚠ value가 min~max 밖이면? — 브라우저가 가까운 끝값으로 자동 보정한다. value="200", max="100"이면 100이 된다.

---

3 step — 증감 단위

본 코드는 step 생략이라 1씩 변한다 (50 → 51 → 52 ...). 다른 단위가 필요하면 명시한다.

<!-- 5 단위로 변함: 0, 5, 10, 15 ... --> <input type="range" min="0" max="100" step="5" value="50"/> <!-- 0.1 단위 (소수점) --> <input type="range" min="0" max="1" step="0.1"/>

---

 

반응형

 

4 어디에 쓰는가

• 볼륨/밝기 조절 — 절댓값보다 비율이 중요한 경우
• 점수/평점 입력 — 0~100, 1~5 등
• 가격 필터 — "이 범위 안의 상품" (보통 dual-range)
• 설정 화면 — 미세 조정이 필요 없는 정수값

💡 주의 — 정확한 숫자 입력엔 type="number"가 더 적합하다. range는 "대략적인 비율 감각"이 중요할 때 쓴다.

---

5 자주 하는 실수

실수	증상	해결
min/max 누락	0~100 기본값 사용 — 의도 불일치	꼭 명시
min > max	슬라이더 작동 안 함	반드시 min < max
value가 min~max 밖	브라우저가 자동 보정 — 혼란	범위 안에 두기
step과 max가 안 맞음	최댓값에 도달 못 함	step의 배수로 max 설정
접근성 라벨 부재	스크린리더 사용자 혼란	label[for]로 매칭

---

6 양쪽 끝 두 값을 받고 싶다면

가격 필터처럼 "이상~이하" 두 값이 필요하면 jQM의 data-role="rangeslider"를 쓴다.

<div data-role="rangeslider"> <label for="price-min">최저가</label> <input type="range" id="price-min" min="0" max="1000" value="100"> <label for="price-max">최고가</label> <input type="range" id="price-max" min="0" max="1000" value="500"> </div>

---

7 현대식 대안

HTML5 type="range"는 모든 브라우저가 지원한다. 디자인 커스터마이징은 CSS의 ::-webkit-slider-thumb 등 의사 요소로 가능하다. 양쪽 끝 두 값이 필요하면 noUiSlider, RC Slider 같은 라이브러리가 표준이다.

---

핵심 한 줄 요약

type="range"막대 슬라이더 — 비율 감각 입력

min / max범위 양 끝값 (필수 명시)

value초기 위치 — 범위 내 숫자

step증감 단위 (생략 = 1)

jQM 추가막대 + 손잡이 + 숫자 입력칸

두 값 필요data-role="rangeslider"

Tags

#jQuery-Mobile #range #slider #input #min #max #step #value #rangeslider #레인지슬라이더 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, range, slider, input, min, max, step, value, rangeslider, 레인지슬라이더, 범위입력, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리