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
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-interactionsOù 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.