Emoji-Slider.js: A Beautiful Javascript Emoji Slider Library

Emoji-Slider.js is a javascript library for creating beautiful slider control with emoji.  In this tutorial, we will implement an emoji slider with some steps by this library.

View emoji slider demo

How to create an emoji slider using emoji-slider.js

1.Create three emoji sliders with emoji-slider tag

<emoji-slider emoji="?"></emoji-slider>
<label>0</label>
<emoji-slider emoji="?" class="styledSlider"></emoji-slider>
<emoji-slider id="rangeSlider" emoji="?" class="rangeSlider"></emoji-slider>

2.Import emoji-slider-min.js file

<script type="module" src="emoji-slider.min.js"></script>

3.Bind events on each emoji

As to default emoji slider, you can add a change event to it and get its value.

<script>
    const label = document.querySelector('label');
    const slider = document.querySelector('emoji-slider');
    slider.addEventListener('change', () => {
      label.textContent = Math.round(slider.value * 100);
    });
</script>

We can use Math.round(slider.value * 100) to get silder value (0 – 100).

If you plan to change the emoji by slider value, you can do like this:

<script> 
   const rangeSlider = document.querySelector('#rangeSlider');
    rangeSlider.addEventListener('change', () => {
      const v = rangeSlider.value;
      if (v < 0.25) {
        rangeSlider.emoji = '?';
      } else if (v < 0.5) {
        rangeSlider.emoji = '?';
      } else if (v < 0.75) {
        rangeSlider.emoji = '?';
      } else {
        rangeSlider.emoji = '?';
      }
    });
  </script>

We can use rangeSlider.emoji to set different emoji.

4.Set different style for emoji slider

You can set different style for emoji slider by css, here is an example:

<style>    
    .styledSlider {
      --emoji-slider-bar-active-color: red;
      --emoji-slider-bar-color: green;
    }

    .rangeSlider {
      --emoji-slider-bar-active-color: #e5e5e5;
    }
</style>