Using :active and ::before to expand the action area of an item

Without messing anything else

Context:

I’m developing a step sequencer with the help of Vue.js and Tone.js.

Recently I had to address an interesting UX problem. There was the need for small controls for each track, in the sequencer. I ended up going with knobs for the volume and had to deal with a UX pitfall. Keeping the left button pressed and trying to manage the volume when the mouse left the small 20x20 area it stopped controlling the knob correctly and instead started having a funky behavior.

The first solution was enlarging the action area by using a common pattern of making the pseudo-element ::before larger than its contents. While it improved the component usability, it didn’t solve the problem in case the user left the action area.

:active to the rescue!

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
https://developer.mozilla.org/en-US/docs/Web/CSS/:active

With the :active state, it was possible to ensure the affected area was as big as we required it to be and it was only that size while interacting with the component.

Essentially, the idea is to make the affected area the size of the whole window while pressing the mouse down on the component. With the help of position: fixed and our good old buddy z-index: 9999 to make sure it doesn’t get interference from other components, like so: