Awesome Range Slider With Emoji Thumb – emoji-slider

An emoji slider web component that lets you create custom slim range sliders with emoji thumbs.

How to use it:

Installation.

# NPM
$ npm install emoji-slider --save

Import the emoji-slider component.

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

Create a basic range slider and specify the emoji used for the thumb.

<emoji-slider emoji="⚽"></emoji-slider>

Advanced use: listen for the slider change and change the emoji based on the current value.

const rangeSlider = document.querySelector('emoji-slider');
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 = '?';
  }
});

Customize the step size.

<emoji-slider emoji="⚽" step="2"></emoji-slider>

Set the initial value.

<emoji-slider emoji="⚽" value=".6"></emoji-slider>

Customize the colors.

.styledSlider {
  --emoji-slider-bar-active-color: red;
  --emoji-slider-bar-color: green;
}
.rangeSlider {
  --emoji-slider-bar-active-color: #e5e5e5;
}