Awesome Range Slider With Emoji Thumb – emoji-slider

Category: Form , Javascript , Recommended | February 15, 2019
Author: pshihn
Views Total: 623
Official Page: Go to website
Last Update: February 15, 2019
License: MIT

Preview:

Awesome Range Slider With Emoji Thumb – emoji-slider

Description:

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;
}

You Might Be Interested In:


Leave a Reply