Emoji Volume Slider

This morning I played a little around and made this emoji volume slider that changes its volume knob to different emoticons based on the current volume:

animation of an emoji volume slider that has changing emoticons as the volume knob

Try it out!

Technical stuff:

These are the changes I made to the forked pen from Emil Carlsson:

I added the v0  class to the volume div  and then configured the handle of the volume slider via css, hiding the original .ui-slider-handle  by setting its width and height to 0px . I then created a pseudo ::after element for the handle which contains the emojis. The general position and size of the emoji are set in the second code block of the css. The third block describes classes v0 to v7 containing the emoticons as Unicode in the content property.

The JavaScript could be more simple and describing it is probably still more complicated than the code itself. But here it goes anyway: jQuery triggers the changeSlider(ui.value) function every time the slider is moved. Based on the argument, it applies the corresponding volume level class by looping through the volumeLevelArray . If the current volume is less than the maximum volume of the specific volume level it removes the current class and sets a new volume level class by calling the changeClassTo(className)  function.

Now I’m starting to wonder if the code had’nt been better and way more readable if I just used eight if-statements … would have been quite the same number of lines, but .. you know .. DRY and stuff …


I found my quick and dirty solution for the changeSlider(myVolume) function very ugly, so I came up with a much more nicer ES6-kind of way:


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.