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

# Range Component

Komponenty zakresu umożliwiają użytkownikom wybranie wartości liczbowej w zdefiniowanym zakresie za pomocą interaktywnego suwaka. Zbudowane z natywnych danych wejściowych zakresu HTML i płynnej stylizacji, suwaki zakresu zapewniają intuicyjną kontrolę nad wartościami ciągłymi. System asortymentu Frutjam obsługuje wiele rozmiarów, kolorów i stanów — idealnie nadaje się do kontroli głośności, filtrów cenowych i przeglądania osi czasu.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa           | Typ     | Opis                               |
| --------------- | ------- | ---------------------------------- |
| range           | Opierać | Stylizowane wejście suwaka zakresu |
| range-xs        | Rozmiar | Bardzo mały                        |
| range-sm        | Rozmiar | Mały                               |
| range-md        | Rozmiar | Średni (domyślny)                  |
| range-lg        | Rozmiar | Duży                               |
| range-xl        | Rozmiar | Bardzo duży                        |
| range-primary   | Kolor   | Podstawowy kolor motywu            |
| range-secondary | Kolor   | Kolor motywu drugorzędnego         |
| range-accent    | Kolor   | Kolor motywu akcentującego         |
| range-neutral   | Kolor   | Neutralny kolor motywu             |
| range-info      | Kolor   | Kolor semantyczny informacji       |
| range-success   | Kolor   | Sukces semantyczny kolor           |
| range-warning   | Kolor   | Ostrzeżenie kolor semantyczny      |
| range-error     | Kolor   | Błąd koloru semantycznego          |

## Podstawowe użycie

## Rozmiary zakresu

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

## Zakres kolorów

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

## Zasięg ze stopniami

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

## Zakres z etykietą

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

## Wyłączony zakres

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

## Zasięg ze znakami

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