AIMRAN
40Volume
HTML + CSSMicrointeractions

Volume knob with light ring

Turn the knob by dragging, scrolling or with arrow keys while a ring of lights shows the level.

Settings

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 for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Microinteractions

See all Microinteractions

Task completed check

MicrointeractionsReact + Motion

Star rating

MicrointeractionsReact + Motion

Avatar with status ring

MicrointeractionsReact + Motion

Bouncing notification badge

MicrointeractionsReact + Motion

Smooth accordion

MicrointeractionsReact + Motion

Copy command button

MicrointeractionsReact + Motion

Paper plane send button

MicrointeractionsReact + Motion

Elastic volume slider

MicrointeractionsReact + Motion

Where to use it

A hardware style control for audio apps, synth interfaces and smart home dashboards. The brushed knob rotates through 270 degrees with a glowing marker, while twenty five dots around it light up in the accent color to show the level, and a large number underneath gives the exact value.

Dragging up or right raises the volume, the mouse wheel nudges it, and the element is a proper ARIA slider with arrow keys, Page Up, Page Down, Home and End. Set the accent and knob colors to match your product.