Gap variable sur un input type="range"
Exemple d'<input type="range"> personnalisé avec des « gap » variables et une « tooltip » suivant le curseur.
Simulateur
Détails des valeurs affichées
Nota
Les données affichées sont mises à jour classiquement avec JavaScript, la position de la « tooltip » et de la barre d'avancement sont mises à jour en CSS via JavaScript en utilisant les variables CSS.
Concernant la barre d'avancement, les choses auraient pu être simple si le moteur de rendu Blink (Chromium et consorts) reconnaissait le pseudo-élément ::-moz-range-progress, présent dans Gecko, (FireFox) et parfaitement autonome, il suffit de lui déclarer la couleur de fond souhaitée.
Il va donc falloir, au moins pour Blink, gérer la propriété background du pseudo-élément ::-webkit-slider-runnable-track.
Une autre façon de procéder est d'utiliser la propriété background-size de l'<input> pour simuler l'avancement, c'est celle choisie dans l'exemple ci-dessus.
Mais dans tous les cas on est obligé d'avoir recours à JavaScript pour gérer cela afin d'obtenir un rendu identique sur les différents navigateurs.
Pour finir et être parfaitement honnête, il existe une solution en pur CSS combinant les propriétés clip-path et box-shadow, certes moins paramétrable mais tout autant efficace !