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:
Customizing an 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!
Result of me trying to integrate a volume control in a music player I’m working on.
Two solutions. The first one on mouse hover, the second is always visible. Maybe more easly usable but less obvious it’s a volume control. Still work in progress tho.
I had fun doing this logo and little animation for an upcoming side project.
I used the great Inter typeface.
I used the Light and dark themed SVG favicon article to make my own on my website. It’s really easy, here is it in action:
It’s almost a year since the first version of Souvenir.
To celebrate, I moved it from an Glitch.Family sub-domain to its own domain: souvenir.cam
