---
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/zh-hant/components/range
---

# Range Component

範圍元件允許使用者使用互動式滑桿選擇定義範圍內的數值。範圍滑桿採用原生 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     | 顏色 | 錯誤語意顏色   |

## 基本用法

## 範圍尺寸

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

## 色彩範圍

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

## 範圍與步驟

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

## 帶標籤的範圍

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

## 禁用範圍

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

## 帶標記的範圍

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