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

# Range Component

Les composants de plage permettent aux utilisateurs de sélectionner une valeur numérique dans une plage définie à l'aide d'un curseur interactif. Construits avec des entrées de plage HTML natives et un style fluide, les curseurs de plage offrent un contrôle intuitif sur les valeurs continues. Le système de la gamme Frutjam prend en charge plusieurs tailles, couleurs et états, ce qui est idéal pour les contrôles de volume, les filtres de prix et le nettoyage de la chronologie.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

| Classe          | Taper   | Description                         |
| --------------- | ------- | ----------------------------------- |
| range           | Base    | Entrée du curseur de plage stylisée |
| range-xs        | Taille  | Très petit                          |
| range-sm        | Taille  | Petit                               |
| range-md        | Taille  | Moyen (par défaut)                  |
| range-lg        | Taille  | Grand                               |
| range-xl        | Taille  | Très grand                          |
| range-primary   | Couleur | Couleur du thème principal          |
| range-secondary | Couleur | Couleur du thème secondaire         |
| range-accent    | Couleur | Couleur du thème d'accentuation     |
| range-neutral   | Couleur | Couleur du thème neutre             |
| range-info      | Couleur | Couleur sémantique de l'information |
| range-success   | Couleur | Couleur sémantique du succès        |
| range-warning   | Couleur | Couleur sémantique d’avertissement  |
| range-error     | Couleur | Couleur sémantique des erreurs      |

## Utilisation de base

## Tailles de gamme

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

## Couleurs de la gamme

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

## Gamme avec marches

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

## Gamme avec étiquette

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

## Portée désactivée

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

## Gamme avec marques

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