Curseur range HTML : min, max, step, affichage et réinitialisation

Référence HTML

Date de création 2026-10-30 Dernière modification 2026-10-30

Les sélecteurs HTML input type="range" permettent de choisir un nombre dans une plage définie à l'aide d'un curseur. Définissez ses limites et son intervalle avec min, max et step, et sa valeur initiale avec value. Il convient pour des ajustements relatifs tels que le volume ou la luminosité ; utilisez un élément de sortie séparé et JavaScript pour afficher le nombre actuel.

Comprendre la plage et les valeurs par défaut

Attribut	Rôle	Comportement par défaut
`min`	Minimum	La valeur par défaut est 0 si elle est omise.
`max`	Maximum	La valeur par défaut est 100. Définissez-la supérieure au minimum pour avoir une plage de réglage utilisable.
`step`	Intervalle entre les valeurs valides	La valeur par défaut est 1. Les pas décimaux et `any` sont aussi possibles.
`value`	Sélection initiale	Si elle est omise, elle est basée sur le point médian et ajustée selon le pas si nécessaire. Dans la plage par défaut, elle est de 50.
`name`	Nom du champ dans les données du formulaire	Donnez un nom à l'entrée pour soumettre sa valeur.

Une entrée de type plage n'a pas de valeur vide. Omettre la valeur ne signifie pas « pas encore sélectionné », et required ne s'applique pas. Si cela a de l'importance de savoir si un choix a été fait explicitement dans un sondage, envisagez des choix explicites ou une autre méthode d'entrée.

Les pas sont calculés à partir d'une base. Par exemple, min="16" max="32" step="2" permet 16, 18, 20, jusqu'à 32. Les navigateurs peuvent normaliser une valeur initiale en dehors de la plage ou du pas, donc vérifiez que la valeur actuelle réelle correspond à la valeur par défaut prévue.

Exemple complet : changer la taille de la police en direct

Enregistrez ce code sous le nom range.html et ouvrez-le dans un navigateur. Aucun serveur ni bibliothèque n’est nécessaire. Le curseur change la taille de police d’une phrase d’exemple de 16 à 32 px par pas de 2 px, et l’envoi affiche les données réelles du formulaire au lieu de les envoyer.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Régler la taille avec range</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin-bottom: 12px; }
    input[type="range"] { width: 20rem; max-width: 100%; accent-color: #1769aa; }
    #preview { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Régler la taille du texte</h1>
  <form id="demo">
    <label for="fontSize">Taille du texte (16 à 32 px, pas de 2 px)</label>
    <input id="fontSize" name="fontSize" type="range"
      min="16" max="32" step="2" value="20">
    <p>Taille actuelle : <output id="selected" for="fontSize">20</output>px</p>
    <p><button type="submit">Afficher les valeurs envoyées</button>
      <button type="reset">Réinitialiser</button></p>
  </form>
  <p id="preview">Déplacer le curseur change la taille de cette phrase.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const slider = document.querySelector('#fontSize');
    const selected = document.querySelector('#selected');
    const preview = document.querySelector('#preview');
    const result = document.querySelector('#result');
    function update() {
      selected.value = slider.value;
      preview.style.fontSize = `${slider.valueAsNumber}px`;
      result.textContent = '';
    }
    slider.addEventListener('input', update);
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => {
      requestAnimationFrame(update);
    });
    update();
  </script>
</body>
</html>

Initialement, la taille affichée est de 20 px et l’aperçu utilise cette taille. Soumettez pour voir la chaîne "20" sous le nom fontSize.
Déplacez le curseur avec un pointeur et vérifiez que le nombre et la taille de la police se mettent à jour ensemble. Utilisez Tab pour l’atteindre et essayez aussi les flèches du clavier.
Par exemple, un pas vers la droite avec la flèche change 20 en 22 : l’affichage devient 22 et la taille de la police 22 px. L’envoi montre maintenant "22".
La réinitialisation remet le curseur, le numéro et la taille de l’aperçu à 20. Le gestionnaire de réinitialisation programme la mise à jour pour la trame suivante afin qu’il lise la valeur après que la réinitialisation native a pris effet.

L’exemple utilise input pour une mise à jour immédiate pendant le réglage. Pour traiter un réglage confirmé, envisagez change. Leur moment de déclenchement et leur objectif diffèrent : choisissez selon le besoin d’aperçu en direct.

Distinquez les valeurs actuelles, soumises et initiales

slider.value est le numéro actuel sous forme de chaîne ; slider.valueAsNumber est numérique. L’attribut de valeur HTML est la valeur initiale : déplacer le curseur ne change pas non plus cette chaîne d’attribut. Lisez la valeur actuelle de l’élément pour l’afficher ou la sauvegarder.

output affiche un résultat calculé ou sélectionné ; il ne remplace pas un champ de formulaire soumis. L'exemple soumet la plage nommée en entrée. Le stockage réel côté serveur nécessite une route existante et la gestion des requêtes, ainsi que la validation côté serveur de la plage et du pas.

Choisissez entre plage et nombre et vérifiez l'affichage.

Pour saisir une quantité, un montant ou une longueur précise, consultez les réglages de plage et de pas d’une saisie number. Un curseur ajuste rapidement un niveau approximatif, mais sélectionner un nombre exact peut être difficile sur un écran étroit. Si la précision est nécessaire, accompagnez-le d’une saisie numérique synchronisée.

accent-color peut changer la couleur d'accent du curseur natif. Cela ne colore pas nécessairement chaque partie de manière identique, et l'apparence varie selon le navigateur et le système d'exploitation. Vérifiez la largeur mobile, l'espace d'interaction adéquat, l'association des étiquettes, le focus au clavier et l'affichage numérique ensemble.

La référence MDN de range décrit les valeurs par défaut et les attributs pris en charge.

Référence HTML