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.

Creating a Emoji Slider Control Using emoji-slider.js

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>

Leave a Reply

Your email address will not be published. Required fields are marked *