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.

View live demo.

Emoji Slider

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

MIT License (c) Preet Shihn

Install

Link to this version
ImportedReleased 11 February 2019MIT License
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install emoji-slider"@0.2.0"
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