기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 범위 슬라이더입니다. 크기 xs-xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
범위 구성 요소를 사용하면 사용자가 대화형 슬라이더를 사용하여 정의된 범위 내에서 숫자 값을 선택할 수 있습니다. 기본 HTML 범위 입력과 부드러운 스타일로 구축된 범위 슬라이더는 연속 값에 대한 직관적인 제어를 제공합니다. Frutjam 제품군 시스템은 다양한 크기, 색상 및 상태를 지원하므로 볼륨 제어, 가격 필터 및 타임라인 스크러빙에 이상적입니다.
CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
| 수업 | 유형 | 설명 |
|---|---|---|
| range | 베이스 | 스타일 범위 슬라이더 입력 |
| range-xs | 크기 | 아주 작은 |
| range-sm | 크기 | 작은 |
| range-md | 크기 | 중간(기본값) |
| range-lg | 크기 | 크기가 큰 |
| range-xl | 크기 | 특대 |
| range-primary | 색상 | 기본 테마 색상 |
| range-secondary | 색상 | 보조 테마 색상 |
| range-accent | 색상 | 악센트 테마 색상 |
| range-neutral | 색상 | 중립 테마 색상 |
| range-info | 색상 | 정보 의미 색상 |
| range-success | 색상 | 성공 의미 색상 |
| range-warning | 색상 | 경고 의미 색상 |
| range-error | 색상 | 오류 의미 색상 |
기본 사용법
<input type="range" min="0" max="100" value="40" class="range"> |
<input type="range" min="0" max="100" value="40" className="range"> |
범위 크기
html
1 2 3 4 5 | <input type="range" min="0" max="100" value="40" class="range range-xs"> <input type="range" min="0" max="100" value="40" class="range range-sm"> <input type="range" min="0" max="100" value="40" class="range range-md"> <input type="range" min="0" max="100" value="40" class="range range-lg"> <input type="range" min="0" max="100" value="40" class="range range-xl"> |
범위 색상
html
1 2 3 4 5 6 7 8 | <input type="range" min="0" max="100" value="40" class="range"> <input type="range" min="0" max="100" value="40" class="range range-primary"> <input type="range" min="0" max="100" value="40" class="range range-secondary"> <input type="range" min="0" max="100" value="40" class="range range-accent"> <input type="range" min="0" max="100" value="40" class="range range-info"> <input type="range" min="0" max="100" value="40" class="range range-success"> <input type="range" min="0" max="100" value="40" class="range range-warning"> <input type="range" min="0" max="100" value="40" class="range range-error"> |
단계가 있는 범위
html
1 2 3 | <input type="range" min="0" max="100" step="10" value="40" class="range"> <input type="range" min="0" max="100" step="5" value="40" class="range range-primary"> <input type="range" min="0" max="100" step="1" value="40" class="range range-secondary"> |
라벨이 있는 범위
html
1 2 3 4 5 6 7 8 9 | <label> <span class="block text-sm font-medium mb-2">Volume</span> <input type="range" min="0" max="100" value="70" class="range range-primary"> </label> <label> <span class="block text-sm font-medium mb-2">Price Range: $20 - $80</span> <input type="range" min="0" max="100" value="50" class="range"> </label> |
비활성화된 범위
html
<input type="range" min="0" max="100" value="40" class="range" disabled> |
표시가 있는 범위
html
1 2 3 4 5 6 7 8 9 10 | <div> <div class="flex justify-between text-xs mb-2"> <span>0</span> <span>25</span> <span>50</span> <span>75</span> <span>100</span> </div> <input type="range" min="0" max="100" value="50" class="range range-primary w-full"> </div> |
Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?
Cherry MCP는 AI 편집기에 요청 시 정확한 범위 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.