https://github.com/pshihn/emoji-slider

A slider control with emojis
https://github.com/pshihn/emoji-slider

emoji slider webcomponent

Last synced: 3 months ago
JSON representation

A slider control with emojis

• Host: GitHub
• URL: https://github.com/pshihn/emoji-slider
• Owner: pshihn
• License: mit
• Created: 2019-02-09T02:46:02.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-21T10:37:55.000Z (about 2 years ago)
• Last Synced: 2024-10-01T02:42:00.900Z (4 months ago)
• Topics: emoji, slider, webcomponent
• Language: JavaScript
• Homepage: https://pshihn.github.io/emoji-slider/demo/
• Size: 7.74 MB
• Stars: 42
• Watchers: 3
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.](https://pshihn.github.io/emoji-slider/demo/)

![Emoji Slider](https://i.imgur.com/RyyBB6B.png)

## Usage

Get the compoent 

```

npm install --save emoji-slider

```

Import in a JavaScript module:

``` javascript

import 'emoji-slider';

```

Or in an HTML page:

```html

```

And then use it in HTML

```

```

More about using web components [here](https://lit-element.polymer-project.org/guide/use).

## 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,

```css

emoji-slider {

  --emoji-slider-bar-color: red;

  --emoji-slider-bar-active-color: green;

}

```

## License

[MIT License](https://github.com/pshihn/emoji-slider/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)