Author: | pshihn |
---|---|
Views Total: | 2,021 views |
Official Page: | Go to website |
Last Update: | February 15, 2019 |
License: | MIT |
Preview:

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