---
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/id/components/range
---

# Range Component

Komponen rentang memungkinkan pengguna memilih nilai numerik dalam rentang yang ditentukan menggunakan penggeser interaktif. Dibuat dengan input rentang HTML asli dan gaya halus, penggeser rentang memberikan kontrol intuitif atas nilai berkelanjutan. Sistem rangkaian Frutjam mendukung berbagai ukuran, warna, dan status—ideal untuk kontrol volume, filter harga, dan penggosokan garis waktu.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas           | Jenis  | Keterangan                        |
| --------------- | ------ | --------------------------------- |
| range           | Basis  | Masukan penggeser rentang bergaya |
| range-xs        | Ukuran | Sangat kecil                      |
| range-sm        | Ukuran | Kecil                             |
| range-md        | Ukuran | Sedang (standar)                  |
| range-lg        | Ukuran | Besar                             |
| range-xl        | Ukuran | Ekstra besar                      |
| range-primary   | Warna  | Warna tema utama                  |
| range-secondary | Warna  | Warna tema sekunder               |
| range-accent    | Warna  | Warna tema aksen                  |
| range-neutral   | Warna  | Warna tema netral                 |
| range-info      | Warna  | Info warna semantik               |
| range-success   | Warna  | Warna semantik sukses             |
| range-warning   | Warna  | Warna semantik peringatan         |
| range-error     | Warna  | Kesalahan warna semantik          |

## Penggunaan Dasar

## Ukuran Rentang

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

## Rentang Warna

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

## Rentang dengan Langkah

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

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

## Rentang Dinonaktifkan

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

## Rentang dengan Tanda

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