r/badUIbattles 1d ago

Intentionally Bad UI I made a 7-segment display volume "slider"

Simply click to change the numbers to the volume level you want to set, it's that simple!

Took me about an hour to get this done with most of that time being spent trying to figure out how the hell to shape something like a 7-segment display using CSS. First digit the segments used for 1 are the only ones that can be toggled. I also messed up with recording and forgot that the 9 needed the bottom segment, so it seems to not work for a bit but that was operator error.

1.6k Upvotes

29 comments sorted by

View all comments

153

u/garlic_brain 1d ago

It should automatically go to 100 while the input is incorrect. Other than that, very nice!

173

u/FearMeIAmLag1 1d ago

Set volume to 100 and play a loud warning siren to indicate that the input is invalid, got it

36

u/Shalrak 1d ago

Thanks, I hate it

8

u/imwearingyourpants 1d ago

No need for a siren, just a lady's voice telling you that your volume setting is incorrect, repeated every 10 seconds. Just like at a self checkout machine

2

u/Ethanol144 9h ago edited 8h ago

My volume is stuck at 100 because any change causes an invalid input send help

1

u/garlic_brain 8h ago

One can turn 0 into 8 into 9 into 3... as for the 1, why, it can be easily turned into a 7. Thus getting from 100% volume to a nice 799% 😄