Update on my volume control work: I decided the control should be always visible, showing it only on hover would risk to be too tricky for the user. On the affordance side, just a regular slider wouldn't be very explicit.
So i tried to make something similar to the Vimeo player: a right triangle.
The next question was: would it be codable, since i wanted to keep it as an
input type="range" (for accessibility reason but also because i didn't wanted to code all the component's interactivity).
Spoiler: I've successfuly done a working prototype!
It's working only on Firefox (my main browser) for now, because of the browser-specific pseudo-elements, but I'm planning to use a PostCSS plugin (like this one) to do the dirty work for me.
For the people on another browser, i should looks like this at the end:
input type="range" is mainly made with pseudo elements, but my main difficulty was making a triangle shape with rounded edges. To achieve that i used the very useful property clip-path. It allow to creates a mask around your element with a shape you choose. It could be a polygon, but also a svg path.
This is this last option that was useful: I've just had to copy/paste my svg path from my UI design app (Figma ❤️) and that was it, i had a beautiful volume control!