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

# Range Component

Aralık bileşenleri, kullanıcıların etkileşimli bir kaydırıcıyı kullanarak tanımlanmış bir aralıktaki sayısal bir değeri seçmesine olanak tanır. Yerel HTML aralığı girişleri ve pürüzsüz stil ile oluşturulan aralık kaydırıcıları, sürekli değerler üzerinde sezgisel kontrol sağlar. Frutjam serisi sistemi birden fazla boyutu, rengi ve durumu destekler; ses seviyesi kontrolleri, fiyat filtreleri ve zaman çizelgesi temizleme için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf           | Tip   | Tanım                         |
| --------------- | ----- | ----------------------------- |
| range           | Temel | Tarz aralığı kaydırıcı girişi |
| range-xs        | Boyut | Ekstra küçük                  |
| range-sm        | Boyut | Küçük                         |
| range-md        | Boyut | Orta (varsayılan)             |
| range-lg        | Boyut | Büyük                         |
| range-xl        | Boyut | Ekstra büyük                  |
| range-primary   | Renk  | Birincil tema rengi           |
| range-secondary | Renk  | İkincil tema rengi            |
| range-accent    | Renk  | Vurgu teması rengi            |
| range-neutral   | Renk  | Nötr tema rengi               |
| range-info      | Renk  | Bilgi anlamsal rengi          |
| range-success   | Renk  | Başarı anlamsal rengi         |
| range-warning   | Renk  | Uyarı anlamsal rengi          |
| range-error     | Renk  | Hata anlamsal rengi           |

## Temel Kullanım

## Aralık Boyutları

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

## Aralık Renkleri

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

## Adımlarla Aralık

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

## Etiketli Aralık

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

## Engelli Aralığı

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

## İşaretli Menzil

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