40Volume
HTML + CSSMicro-interactions

Molette de volume avec anneau lumineux

Tourne la molette en glissant, avec la roulette ou les flèches pendant qu'un anneau lumineux indique le niveau.

Réglages

16px
1x

Code

<div class="uv-mvk"><div class="kn" role="slider" tabindex="0" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40"><svg class="ds" viewBox="0 0 120 120" aria-hidden="true"><circle cx="21.82" cy="98.18" r="2.6"/><circle cx="15.10" cy="90.00" r="2.6"/><circle cx="10.11" cy="80.66" r="2.6"/><circle cx="7.04" cy="70.53" r="2.6"/><circle cx="6.00" cy="60.00" r="2.6"/><circle cx="7.04" cy="49.47" r="2.6"/><circle cx="10.11" cy="39.34" r="2.6"/><circle cx="15.10" cy="30.00" r="2.6"/><circle cx="21.82" cy="21.82" r="2.6"/><circle cx="30.00" cy="15.10" r="2.6"/><circle cx="39.34" cy="10.11" r="2.6"/><circle cx="49.47" cy="7.04" r="2.6"/><circle cx="60.00" cy="6.00" r="2.6"/><circle cx="70.53" cy="7.04" r="2.6"/><circle cx="80.66" cy="10.11" r="2.6"/><circle cx="90.00" cy="15.10" r="2.6"/><circle cx="98.18" cy="21.82" r="2.6"/><circle cx="104.90" cy="30.00" r="2.6"/><circle cx="109.89" cy="39.34" r="2.6"/><circle cx="112.96" cy="49.47" r="2.6"/><circle cx="114.00" cy="60.00" r="2.6"/><circle cx="112.96" cy="70.53" r="2.6"/><circle cx="109.89" cy="80.66" r="2.6"/><circle cx="104.90" cy="90.00" r="2.6"/><circle cx="98.18" cy="98.18" r="2.6"/></svg><div class="cap"><i></i></div></div><output class="v">40</output><span class="lb">Volume</span></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Plus dans Micro-interactions

Voir tout : Micro-interactions

Où l’utiliser

Une commande au style matériel pour les applis audio, les synthés et les tableaux de bord domotiques. La molette brossée tourne sur 270 degrés avec un repère lumineux, vingt-cinq points autour s'allument dans la couleur d'accent pour montrer le niveau, et un grand chiffre en dessous donne la valeur exacte.

Glisser vers le haut ou la droite monte le volume, la roulette l'ajuste et l'élément est un vrai slider ARIA avec les flèches, Page précédente, Page suivante, Début et Fin. Règle l'accent et la couleur de la molette selon ton produit.