emoji-slider
A slider control which uses an emoji as the thumb.
This is built as a web component, so it's usable anywhere with HTML.
Usage
Get the compoent
npm install --save emoji-slider
Import in a JavaScript module:
import 'emoji-slider';Or in an HTML page:
<script type="module" src="./node_module/emoji-slider/bin/emoji-slider.js"></script>And then use it in HTML
<emoji-slider emoji="😍"></emoji-slider>
More about using web components here.
Properties
value: The numeric value of the slider between 0 and 1.
emoji: The emoji character to use in the thumb of the slider. If not set, a circular thumb is used.
step: The change in value when controlling the slider with keyboard e.g., Right Arrow Key will increate the value by 0.1. Default value of step is 0.1
Events
change event is fired as the slider value changes. the current value can be obtained from the event details: event.detail.value
Styling
The slider bar color (and active color) be styled using CSS properties. For example,
emoji-slider {
--emoji-slider-bar-color: red;
--emoji-slider-bar-active-color: green;
}