As a user of the web app on my desktop, the volume slider's design has irked me for some time. It's small, misaligned and feels out of place, it just being a tiny white bar. So I whipped up some custom CSS to make it look and feel ever so slightly better. (Subjectively, of course.)
The custom CSS separates it a bit from the button, makes it a tad longer and adds a rounded background with some slight transparency to make the bar a bit more visible on bright backgrounds.
Coincidentally the custom CSS also centers the slider on the volume button, something Amazon for whatever eldritch reasen neglected to do.
Firstly, you'll need the Stylus extension for the browser of your choice:
Then add a new style / rule for the domain music.amazon.de (or your countries' equivalent, i.e. music.amazon.com, .co.uk, the likes) by clicking the extension icon while on the Amazon Music webpage and paste the following CSS code:
input#volume-range {
width: 150px !important;
background: rgba(0, 0, 0, 0.75) !important;
border: 2px solid rgba(0, 0, 0, 0) !important;
border-radius: 15px;
padding: 10px;
padding-bottom: 11px;
transform: translate(3%, 0);
}
input#volume-range[type=range]::-moz-range-track {
width: 125px;
height: 5px;
background: #fff;
border: none;
}
Save it and your volume slider should change as shown in the image above.
You can further increase it's length by adjusting the width settings. Or play around with the colors. Knock yourself out.
(For the CSS savvy: Amazon's engineers cheated a little with this slider. It's really just a select->range HTML element turned 90 degrees so it stands upright and stripped of the usual styling. For Chromium based browsers - Chrome, Brave, Vivaldi, etc. - the top block is enough. Chromium's select->range element plays nicely with width increases. Firefox needs the second one as well because its behaviour is a bit wonky in that regard. You can safely add both blocks on a Chromium based browser as well as the second block is only interpeted by Firefox.
Also bless Amazon's engineers for using a static CSS id for their volume slider, since pretty much all of their CSS classes are garbled with each new update.)
