How to Create an Emoji Rating Slider With JavaScript

Emojis are among the mostly used icons on social apps at this time. Whether or not you need to convey feelings or improve communication, there may be an emoji or a mixture of emojis to perform the duty. On this tutorial, we’ll construct a ranking emoji part that can enable the person to fee their stage of satisfaction by utilizing a slider.

HTML Construction

The HTML Construction will encompass a container div factor with the next baby parts:

• A title and a subtitle
• The picture factor to indicate the present emoji
• A div to indicate the ranking content material.
• A variety enter factor.

Styling With CSS

We’ll begin by making use of the next types to the physique to heart all our parts within the web page. 

Bricolage Grotesque is a font out there from Google fonts. And the colour I’ve chosen makes use of a slight transparency so  that when the background modifications, the textual content shade will change too.

Lastly, you’ll see a transition property on the background, in order that once we change the colour it fades properly from one to the opposite.

1

physique {

2

  font-family: 'Bricolage Grotesque', sans-serif;

3

  show: flex;

4

  justify-content: heart;

5

  align-items: heart;

6

  flex-direction: column;

7

  min-height: 100vh;

8

  background: #fff;

9

  shade: rgba(0,0,0,0.7);

10

  transition: background .5s ease-in-out;

11

}

For the container factor, apply the next types in order that the kid parts are centered and vertically stacked. 

1

.container {

2

  width: 300px;

3

  padding: 0 10px;

4

  background: #B4BED9;

5

  border-radius: 20px;

6

  padding: 40px 5px;

7

  show: flex;

8

  flex-direction: column;

9

  align-items: heart;  

10

  text-align: heart;

11

  justify-content: space-around;

12

  place: relative;

13

14

}

The title and subtitle are positioned on the high of the container factor with the next types.

1

.title {

2

  font-size: 3rem;

3

  font-weight: 800;

4

  margin: 0 0 1rem 0;

5

  line-height: .9;

6

}

7

.subtitle {

8

  font-size: 1rem;

9

  margin: 0;

10

}

Customized Slider

The vary enter consists of a bar and a slider management factor by default. The slider management factor (the thumb) strikes alongside the horizontal bar, permitting customers to pick out a particular worth. The enter vary additionally appears to be like completely different relying on the browser it’s displayed on. Right here is the default vary enter on Chrome.

As an alternative of utilizing the default slider above, we’ll customise it to look a lot better. Set -webkit-appearance: none; and look: none; on the vary enter. 

1

enter[type="range"] {

2

  -webkit-appearance: none;

3

  look: none;

4

}

The impact of those types is to take away the default look in order that we are able to present our customized type. Set the next  further types on the slider bar.

1

enter[type="range"] {

2

  place: absolute;

3

  high: 85%;

4

  -webkit-appearance: none;

5

  look: none;

6

  width: 80%;

7

  background: #e5e5e5;

8

  peak: 2px;

9

  border-radius: 5px;

10

  define: none;

11

  box-shadow: #F2D2BD;

12

}

The looks of the thumb varies throughout completely different browsers; therefore, we’ll apply particular person types primarily based on the browser to make the thumb constant throughout completely different browsers. The type  -webkit-appearance: none;  will take away the default thumb type offered by the browser. Let’s  additionally apply a customized peak, width, padding, and background shade. 

1

enter[type="range"]::-webkit-slider-thumb {

2

  -webkit-appearance: none;

3

  padding: 5px;

4

  peak: 5px;

5

  width: 5px;

6

  border:5px stable #fff;

7

  border-radius: 50%;

8

  cursor: pointer;

9

  background: #4c4c4c;

10

}

11

12

/* FIREFOX */

13

enter[type="range"]::-moz-range-thumb {

14

  padding: 5px;

15

  peak: 5px;

16

  width: 5px;

17

  border:5px stable #fff;

18

  border-radius: 50%;

19

  cursor: pointer;

20

  background: #4c4c4c;

21

22

}

Set dimensions to the picture and add a bounce impact animation.

1

@keyframes bounce {

2

  0%, 100% {

3

    remodel: translateY(0);

4

  }

5

  50% {

6

    remodel: translateY(-10px);

7

  }

8

}

9

10

img {

11

  peak: 150px;

12

  width: 150px;

13

  define: none;

14

  animation: dance 1s infinite;

15

}

Lastly type the ranking content material div.

1

.ranking {

2

  font-size: 20px;

3

  font-weight: 100;

4

  width: 150px;

5

}

JavaScript Performance

As the worth on the vary enter modifications, we’ll use JavaScript to replace the emoji sort, the colour of the container, and the ranking message. 

I downloaded a brilliant set of 100 SVG emojis from Envato Parts, ideally suited for this challenge.

So, with my SVG icons chosen and uploaded, let’s get our parts and outline our knowledge.

1

const container = doc.querySelector('.container')

2

const slider = doc.getElementById("slider");

3

const emoji = doc.querySelector(".emoji");

4

const fee = doc.getElementById("message");

5

const colours = ["#d35e65", "#d3965c", "#cad48a", "#6ed494", "#18c574"];

6

const emojis = [

7

  {

8

    text: "Awful",

9

    url: "Disappointed.svg"

10

  },

11

  {

12

    text: "Bad",

13

    url: "Sad.svg"

14

  },

15

  {

16

    text: "Okay",

17

    url: "Expressionless.svg"

18

  },

19

  {

20

    text: "Good",

21

    url: "Smile.svg"

22

  },

23

  {

24

    text: "Great",

25

    url: "Love.svg"

26

  }

27

];

The emojis array defines objects; every object comprises an emoji picture and textual content describing the emoji sentiment. We’ll use this knowledge to dynamically show emojis primarily based on person interactions with the ranking part. 

Subsequent, create a perform known as UpdateRating(). Contained in the UpdateRating() perform, get the worth on the shifting slider.

1

perform UpdateRating() {

2

   const worth =slider.worth;

3

  }

Subsequent, we’ll create if statements that can verify the worth on the slider and replace the emoji type, the background shade, and message relying on the worth on the slider. Low values will appeal to a low ranking, unhappy emojis, and unfavorable messages, whereas excessive values will appeal to a excessive ranking, constructive messages, and constructive emojis.

The slider spans from 0 to 100; we’ll due to this fact allocate every message a 20-unit interval.

Replace the UpdateRating perform as proven beneath.

1

perform UpdateRating() {

2

  const worth =slider.worth;

3

4

  if (worth >= 0 && worth < 20) {

5

    emoji.src = emojis[0].url

6

    fee.textContent =  emojis[0].textual content;

7

    container.type.backgroundColor =colours[0];

8

9

  } else if (worth >= 20 && worth < 40) {

10

    emoji.src = emojis[1].url

11

    fee.textContent =  emojis[1].textual content;

12

    container.type.backgroundColor =colours[1];

13

14

  } else if (worth >= 40 && worth < 60) {

15

    emoji.src = emojis[2].url

16

    fee.textContent =  emojis[2].textual content;

17

    container.type.backgroundColor =colours[2];

18

19

  } else if (worth >= 60 && worth < 80) {

20

    emoji.src = emojis[3].url

21

    fee.textContent =  emojis[3].textual content;

22

    container.type.backgroundColor = colours[3];

23

24

  } else if (worth >= 80 && worth <= 100) {

25

    emoji.src = emojis[4].url

26

    fee.textContent =  emojis[4].textual content;

27

    container.type.backgroundColor = colours[4];   

28

  }}

Let’s refactor our conditional logic to make sure the code just isn’t repetitive. Create a perform known as setProperties(), which takes index as an argument . Inside setProperties(),  add the repetitive logic.

1

perform setProperties(index){

2

  emoji.src = emojis[index].url

3

  fee.textContent =  emojis[index].textual content;

4

  container.type.backgroundColor =colours[index];

5

  }

For every situation, name the setProperties() perform like this:

1

perform UpdateRating() {

2

  const worth =slider.worth;

3

4

  if (worth >= 0 && worth < 20) {

5

    setProperties(0)

6

7

  } else if (worth >= 20 && worth < 40) {

8

    setProperties(1)

9

10

  } else if (worth >= 40 && worth < 60) {

11

    setProperties(2)

12

13

  } else if (worth >= 60 && worth < 80) {

14

    setProperties(3)

15

16

  } else if (worth >= 80 && worth <= 100) {

17

    setProperties(4) 

18

  }}

Lastly, we have to add an occasion listener to the enter vary. The occasion listener will pay attention for the oninput occasion after which name the UpdateRating() perform. An oninput occasion happens when the worth of an enter factor is modified.Relating to the enter vary, the oninput occasion will present real-time suggestions(worth) when the person interacts with it.  

1

slider.addEventListener("enter", UpdateRating);

The UpdateRating() perform will probably be invoked each time the person strikes the slider.

Conclusion

This tutorial has coated how one can construct a purposeful emoji ranking part. We’ve additionally realized how the enter vary factor is styled on completely different browsers. To reinforce the performance, you may also request further suggestions from customers.  

Let’s remind ourselves of what we’ve constructed—and I hope you loved this expertise!