Compare slider

Ce qui est inclus

Un curseur avant/après, dans deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe — on les copie dans un projet et ça marche. Les deux images de démonstration sont fournies avec.

Le composant ne réinvente pas de curseur : il se pose sur un <input type="range"> du navigateur, étendu sur toute l’image et peint en transparent. C’est lui qui reçoit le doigt, la souris et le clavier ; c’est lui qui porte le rôle slider, ses bornes et sa valeur pour les lecteurs d’écran. Le script n’ajoute qu’une chose : il recopie cette valeur dans une variable CSS.

Fonctionnalités

• Clavier complet, sans une ligne de code — flèches, Page précédente et Page suivante, Début et Fin : tout vient du curseur natif, donc rien ne peut se désaccorder de la plateforme.
• Sens vertical — une classe suffit. C’est le navigateur qui tourne le contrôle : le geste, les flèches et l’orientation annoncée suivent d’eux-mêmes.
• Les deux images restent alignées — la révélation est une découpe, pas un redimensionnement. Aucune position, pas même 1 %, ne les fait se décaler.
• Il se resserre selon la place reçue — pas selon la taille de l’écran. Posé dans une colonne étroite d’une page large, il réduit ses marges quand même.
• Une variable pour l’échelle — cadre, arrondi, poignée, chevrons et étiquettes dérivent tous de la taille du texte et suivent ensemble.
• La page continue de défiler — sur mobile, le composant prend le geste horizontal et laisse le vertical au doigt qui veut simplement faire défiler.

Le poser dans une page

Deux fichiers à charger, puis le balisage :

<link rel="stylesheet" href="compare-slider.css">
<script src="compare-slider.js" defer></script>

<div class="compare-slider">
 <div class="compare-slider__frame">

  <img class="compare-slider__image"
       src="apres.webp" alt="Après retouche">

  <div class="compare-slider__reveal">
   <img class="compare-slider__image"
        src="avant.webp" alt="Avant retouche">
  </div>

  <span class="compare-slider__label
               compare-slider__label--before">Avant</span>
  <span class="compare-slider__label
               compare-slider__label--after">Après</span>

  <span class="compare-slider__line" aria-hidden="true"></span>
  <span class="compare-slider__handle" aria-hidden="true">
   <svg class="compare-slider__handle-icon"
        viewBox="0 0 24 24" aria-hidden="true">
    <path d="M9 6 L4 12 L9 18 M15 6 L20 12 L15 18"/>
   </svg>
  </span>

  <input class="compare-slider__control" type="range"
         min="0" max="100" step="any" value="50"
         aria-label="Position de la comparaison">
 </div>
</div>

Aucun attribut à retenir : le composant s’installe au chargement de la page sur tout .compare-slider, y compris ceux ajoutés plus tard. Ajoutez la classe compare-slider--vertical pour le sens vertical, compare-slider--paper pour le fond clair.

Ce qu’il faut savoir

• Sans JavaScript, il s’affiche mais ne bouge plus. Les deux images, les étiquettes et la couture restent là, à la position posée en CSS. Le curseur, lui, est retiré : rien ne permet de relier un range à une variable CSS sans script, et un contrôle qui bouge sans rien déplacer vaut moins que pas de contrôle du tout.
• La scène veut une hauteur. Par défaut elle prend celle de la référence ; donnez-lui --cs-block-size: 100% pour qu’elle remplisse son parent, à condition que ce parent en ait une.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site, et n’utilise jamais innerHTML.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un composant Framer commercial, relevées sur le site publié à cinq largeurs. Le code, lui, est original — la technique n’est même pas la même — et les deux photographies, une pièce avant et après travaux, ont été générées pour ce dossier.