A slider control with emojis
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
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;
}
License
Install
Framework Support
Polymer 3.0+
Browser Independent
Install with
Run the above npm command in your project folder.
If you have any issues installing, please
contact the author.
Release notes - Version 0.2.0
Dependencies
- @polymer/polymer#^3.1.0
- lit-element#^2.0.1