HTML + CSSMicrointeracciones
Rueda de volumen con anillo de luces
Gira la rueda arrastrando, con la rueda del ratón o con las flechas mientras un anillo de luces marca el nivel.
Ajustes
16px
1x
Código
<div class="uv-mvk"><div class="kn" role="slider" tabindex="0" aria-label="Volumen" 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">Volumen</span></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Un control con aire de hardware para apps de audio, sintetizadores y paneles de casa inteligente. La rueda cepillada gira 270 grados con una marca luminosa, mientras veinticinco puntos a su alrededor se encienden en el color de acento para mostrar el nivel, y un número grande debajo da el valor exacto.
Arrastrar hacia arriba o a la derecha sube el volumen, la rueda del ratón lo ajusta y el elemento es un slider ARIA de verdad con flechas, Re Pág, Av Pág, Inicio y Fin. Ajusta el acento y el color de la rueda a tu producto.