Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Range Component

CSS-only Tailwind CSS range slider with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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
rangeBasisMasukan penggeser rentang bergaya
range-xsUkuranSangat kecil
range-smUkuranKecil
range-mdUkuranSedang (standar)
range-lgUkuranBesar
range-xlUkuranEkstra besar
range-primaryWarnaWarna tema utama
range-secondaryWarnaWarna tema sekunder
range-accentWarnaWarna tema aksen
range-neutralWarnaWarna tema netral
range-infoWarnaInfo warna semantik
range-successWarnaWarna semantik sukses
range-warningWarnaWarna semantik peringatan
range-errorWarnaKesalahan warna semantik

Penggunaan Dasar

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

<input type="range" min="0" max="100" value="40" className="range">

Ukuran Rentang

html 
1
2
3
4
5
<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 
1
2
3
4
5
6
7
8
<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 
1
2
3
<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 
1
2
3
4
5
6
7
8
9
<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

0 25 50 75 100
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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>