---
title: "범위"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-30
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "기본 HTML 입력을 사용하는 Tailwind CSS 범위. 설정 패널, 필터 및 숫자 컨트롤에 대한 사용자 정의 단계, 크기 및 색상이 있는 액세스 가능한 슬라이더입니다."
url: https://frutjam.com/ko/components/range
---

# 범위 구성 요소

Range components allow users to select a numeric value within a defined range using an interactive slider. Built with native HTML range inputs and smooth styling, range sliders provide intuitive control over continuous values. The Frutjam range system supports multiple sizes, colors, and states—ideal for volume controls, price filters, and timeline scrubbing.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

| Class           | 타입    | Description               |
| --------------- | ----- | ------------------------- |
| range           | Base  | Styled range slider input |
| range-xs        | Size  | Extra small               |
| range-sm        | Size  | Small                     |
| range-md        | Size  | Medium (default)          |
| range-lg        | Size  | Large                     |
| range-xl        | Size  | Extra large               |
| range-primary   | Color | Primary theme color       |
| range-secondary | Color | Secondary theme color     |
| range-accent    | Color | Accent theme color        |
| range-neutral   | Color | Neutral theme color       |
| range-info      | Color | Info semantic color       |
| range-success   | Color | Success semantic color    |
| range-warning   | Color | Warning semantic color    |
| range-error     | Color | Error semantic color      |

## Basic Usage

## Range Sizes

```html
<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">
```

## Range Colors

```html
<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">
```

## Range with Steps

```html
<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">
```

## Range with Label

```html
<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>
```

## Disabled Range

```html
<input type="range" min="0" max="100" value="40" class="range" disabled>
```

## Range with Marks

```html
<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>
```