Monat: Juli 2017

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:

Try it out!

Technical stuff:

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

HTML

XHTML

1

2

3

4

5

<div id="player">

<i class="fa fa-volume-down"></i>

<div id="volume"class="v0"></div>

<i class="fa fa-volume-up"></i>

</div>

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.

SASS

Sass

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

#volume .ui-slider-handle {

width:0px;

height:0px;

position:absolute;

cursor:pointer;

outline:none;

border:none;

}

#volume .ui-slider-handle::after {

$size:25px;

font-size:$size;

position:absolute;

top:-5px;

left:-$size/2

}

#volume {

&.v0 .ui-slider-handle::after {

content:'\1F634';

}

&.v1 .ui-slider-handle::after {

content:'\1F62B';

}

&.v2 .ui-slider-handle::after {

content:'\1F614';

}

&.v3 .ui-slider-handle::after {

content:'\1F60C';

}

&.v4 .ui-slider-handle::after {

content:'\1F60F';

}

&.v5 .ui-slider-handle::after {

content:'\1F60A';

}

&.v6 .ui-slider-handle::after {

content:'\1F604';

}

&.v7 .ui-slider-handle::after {

content:'\1F60D';

}

}

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 …

JavaScript

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

$("#volume").slider({

// ...

slide:function(event,ui){

changeSlider(ui.value);

}

});

// ...

functionchangeSlider(myVolume){

let volumeLevelArray=[[100,'v7'],[96,'v6'],[80,'v5'],[70,'v4'],

[60,'v3'],[45,'v2'],[30,'v1'],[15,'v0']]

for(varlevel=0;level<volumeLevelArray.length;level++){

if(myVolume<volumeLevelArray[level][0]){

changeClassTo(volumeLevelArray[level][1])

}

}

setVolume(myVolume/100);

}

functionchangeClassTo(className){

$('#volume').removeClass();

$('#volume').addClass(className);

}

Update:

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: