<input type="range">

Exemple interactif

<p>Paramètres audio&nbsp;:</p>

<div>
  <input type="range" id="volume" name="volume" min="0" max="11" />
  <label for="volume">Volume</label>
</div>

<div>
  <input
    type="range"
    id="cowbell"
    name="cowbell"
    min="0"
    max="100"
    value="90"
    step="10" />
  <label for="cowbell">Cowbell</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Si le navigateur de l'utilisatrice ou l'utilisateur ne prend pas en charge le type range, il utilisera le type text à la place.

Valeur

La valeur d'un élément <input type="range"> est définit en utilisant l'attribut value qui accepte une chaîne de caractères correspondant à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne de caractères vide (""). La valeur par défaut est celle médiane entre le minimum et le maximum — sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut min. Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut :

defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;

Si une tentative est faite pour définir la valeur en dessous du minimum, elle est réglée sur le minimum. De même, une tentative de définir la valeur au-dessus du maximum entraîne son réglage sur le maximum.

Validation

Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées :

• Si la valeur de l'attribut value est quelque chose qui ne peut pas être converti en nombre décimal, la validation échoue.
• La valeur ne doit pas être inférieure à min. La valeur minimale par défaut est 0.
• La valeur ne doit pas être supérieure à max. La valeur maximale par défaut est 100.
• La valeur doit être un multiple de step. La valeur par défaut est 1.

Attributs supplémentaires

En complément des attributs communs à l'ensemble des éléments <input>, les champs pour les intervalles peuvent utiliser les attributs suivants :

list

La valeur de cet attribut est l'identifiant (id) d'un élément <datalist> situé dans le même document. L'élément <datalist> fournit une liste de valeurs prédéfinies qui doivent être suggérées lors de la saisie dans le champ. Toute valeur de cette liste qui n'est pas compatible avec le type de champ (type) ne sera pas incluse dans les suggestions. Les valeurs fournies sont des suggestions et pas des contraintes : il reste tout à fait possible de choisir une valeur différente que celles de la liste.

Voir l'exemple ci-après sur le contrôle d'intervalle avec les marques qui illustre comment ces options s'affichent dans les navigateurs qui prennent en charge la fonctionnalité.

max

La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut value) dépasse ce seuil, la validation échouera. Si la valeur fournie n'est pas un nombre, aucun maximum ne sera fixé pour la valeur du contrôle.

Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut min. Voir l'attribut HTML max.

min

La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut value) est inférieure à ce seuil, la validation échouera. Si la valeur fournie n'est pas un nombre, aucun minimum (min) ne sera fixé pour la valeur du contrôle.

Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut max. Voir l'attribut HTML min.

step

L'attribut step est un nombre qui définit la granularité à laquelle la valeur doit obéir, ou la valeur any, qui est décrite ci-après. Seules les valeurs qui sont des incréments en multiple de step depuis la valeur de base (min si cet attribut est défini, value sinon, et si aucun n'est fourni, une valeur par défaut appropriée) sont valides.

La valeur par défaut du pas pour les entrées step est 1, ce qui permet de saisir uniquement des nombres entiers — à moins que la base du pas ne soit pas un nombre entier.

Si cet attribut utilise la chaîne de caractère any, cela signifie qu'il n'y a aucune contrainte d'incrément et que toute valeur est autorisée (sous réserve de respecter les autres contraintes, comme celles indiquées par min et max). Voir l'exemple Définir l'étape sur la valeur any pour voir comment cela fonctionne dans les navigateurs pris en charge.

Attributs non standard

orient

Semblable à la propriété CSS non standard -moz-orient qui agit sur les éléments <progress> et <meter>, l'attribut orient définit l'orientation de la piste pour le contrôle d'intervalle. Les valeurs possibles incluent horizontal pour un affichage horizontal et vertical pour un affichage vertical.

Exemples

Bien que le type number permette à l'utilisatrice ou l'utilisateur de saisir un nombre avec certaines contraintes optionnelles (par exemple, pour que la valeur soit comprise entre un minimum et un maximum), ce type nécessite de saisir une valeur spécifique. Le type range permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu.

Voici quelques scénarios où un contrôle de saisie avec un intervalle est plus pertinent :

• Les contrôles relatifs à l'audio pour le volume, la balance ou les filtres.
• Les contrôles relatifs à la configuration des couleurs (canaux, transparence, luminosité, etc.).
• Les contrôles relatifs à la configuration de jeux vidéos (difficulté, distance de visibilité, taille du monde généré, etc.).
• La longueur du mot de passe pour les mots de passe générés par un gestionnaire de mots de passe.

De façon générale, si une utilisatrice ou un utilisateur est plutôt intéressé dans un pourcentage représentant la distance entre la borne minimale et la borne maximale, un intervalle de saisie sera plus pertinent (par exemple, pour le volume, on pensera plutôt « augmenter le volume jusqu'à la moitié du maximum » que « mettre le volume à 0.5 »).

Définir le minimum et le maximum

Par défaut, le minimum vaut 0 et le maximum vaut 100. Si ces bornes ne conviennent pas, on peut facilement les changer avec les attributs min et/ou max. Ces attributs acceptent des nombres décimaux.

Par exemple, afin de demander à une utilisatrice ou un utilisateur de choisir une valeur approximative dans l'intervalle [-10, 10], on pourra utiliser :

<input type="range" min="-10" max="10" />

Définir la granularité

Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut step qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut step avec la valeur 0.5 :

Utiliser l'attribut step

<input type="range" min="5" max="10" step="0.5" />

Utiliser l'attribut step avec any

Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur any pour l'attribut step :

HTML

<input id="pi_input" type="range" min="0" max="3.14" step="any" />
<p>Valeur&nbsp;: <output id="value"></output></p>

JavaScript

const value = document.querySelector("#value");
const input = document.querySelector("#pi_input");
value.textContent = input.value;
input.addEventListener("input", (event) => {
  value.textContent = event.target.value;
});

Cet exemple permet à l'utilisateur·ice de choisir n'importe quelle valeur entre 0 et π sans aucune restriction sur la partie fractionnaire de la valeur sélectionnée. JavaScript est utilisé pour montrer comment la valeur change lorsque l'utilisateur·ice interagit avec l'intervalle.

Ajouter des marques

Pour ajouter des marques à un contrôle d'intervalle, incluez l'attribut list, en lui donnant l'id d'un élément <datalist> qui définit une série de marques sur le contrôle. Chaque point est représenté par un élément <option> dont la valeur de l'attribut value correspond à la valeur de l'intervalle à laquelle une marque doit être dessinée.

HTML

<label for="temp">Choisissez une température confortable&nbsp;:</label><br />
<input type="range" id="temp" name="temp" list="markers" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

Résultat

Utiliser la même liste de données pour plusieurs contrôles d'intervalle

Pour éviter de répéter du code, vous pouvez réutiliser le même élément <datalist> pour plusieurs éléments <input type="range">, ainsi que pour d'autres types d'éléments <input>.

HTML

<p>
  <label for="temp1">Température pour la pièce 1&nbsp;:</label>
  <input type="range" id="temp1" name="temp1" list="values" />
</p>
<p>
  <label for="temp2">Température pour la pièce 2&nbsp;:</label>
  <input type="range" id="temp2" name="temp2" list="values" />
</p>

<p>
  <label for="temp3">Température pour la pièce 3&nbsp;:</label>
  <input type="range" id="temp3" name="temp3" list="values" />
</p>

<datalist id="values">
  <option value="0" label="0"></option>
  <option value="25" label="25"></option>
  <option value="50" label="50"></option>
  <option value="75" label="75"></option>
  <option value="100" label="100"></option>
</datalist>

Résultat

Ajouter des étiquettes

Vous pouvez ajouter des étiquettes aux marques en donnant aux éléments <option> des attributs label. Cependant, le contenu des étiquettes ne sera pas affiché par défaut. Vous pouvez utiliser CSS pour afficher les étiquettes et les positionner correctement. Voici une façon de le faire.

HTML

<label for="tempB">Choisissez une température confortable&nbsp;:</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="très froid !"></option>
  <option value="25" label="frais"></option>
  <option value="50" label="moyen"></option>
  <option value="75" label="chaud !"></option>
  <option value="100" label="très chaud !"></option>
</datalist>

CSS

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
  width: 200px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 200px;
  margin: 0;
}

Résultat

Créer des contrôles d'intervalle verticaux

Par défaut, les navigateurs affichent les éléments <input type="range"> sous forme de curseurs avec le bouton coulissant de gauche à droite.

Pour créer un intervalle vertical dans lequel le bouton coulisse de haut en bas, définissez la propriété writing-mode avec une valeur de vertical-rl ou vertical-lr :

<input type="range" min="0" max="10" value="8" />

input[type="range"] {
  writing-mode: vertical-lr;
}

Cela fait en sorte que le curseur de l'intervalle s'affiche verticalement :

Vous pouvez également définir la propriété CSS appearance sur la valeur non standard slider-vertical si vous souhaitez prendre en charge les anciennes versions de Chrome et Safari, et inclure l'attribut non standard orient="vertical" pour prendre en charge les anciennes versions de Firefox.

Voir Créer des contrôles de formulaire verticaux pour des exemples.

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les formulaires HTML
• L'élément <input> et l'interface HTMLInputElement sur laquelle l'élément du DOM correspondant est basé
• L'élément <input type="number">
• Les propriétés validityState.rangeOverflow et validityState.rangeUnderflow
• Contrôler plusieurs paramètres avec ConstantSourceNode
• Créer des contrôles de formulaire verticaux
• Mettre en forme un contrôle d'intervalle ^(angl.)