emoji-slider | Vaadin

A slider control with emojis


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


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.


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


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;


MIT License (c) Preet Shihn


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


  • @polymer/polymer#^3.1.0
  • lit-element#^2.0.1