---
title: "Range"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Range using native HTML input. Accessible slider with custom steps, sizes, and colors for settings panels, filters, and numeric controls."
url: https://frutjam.com/vi/components/range
---

# Range Component

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.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học         | Kiểu    | Sự miêu tả                  |
| --------------- | ------- | --------------------------- |
| range           | Căn cứ  | Styled range slider input   |
| range-xs        | Kích cỡ | Cực nhỏ                     |
| range-sm        | Kích cỡ | Bé nhỏ                      |
| range-md        | Kích cỡ | Trung bình (mặc định)       |
| range-lg        | Kích cỡ | Lớn                         |
| range-xl        | Kích cỡ | Cực lớn                     |
| range-primary   | Màu sắc | Màu chủ đề chính            |
| range-secondary | Màu sắc | Màu chủ đề phụ              |
| range-accent    | Màu sắc | Màu chủ đề nhấn mạnh        |
| range-neutral   | Màu sắc | Màu chủ đề trung tính       |
| range-info      | Màu sắc | Màu sắc ngữ nghĩa thông tin |
| range-success   | Màu sắc | Màu ngữ nghĩa thành công    |
| range-warning   | Màu sắc | Màu ngữ nghĩa cảnh báo      |
| range-error     | Màu sắc | Lỗi ngữ nghĩa màu sắc       |

## Cách sử dụng cơ bản

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