Radial Color Picker For Vue.js

Radial Color Picker For Vue.js

A Vue component of a modern radial color picker.

Radial Color Picker - Vue

screenshot

Downloads Version License CircleCI

Introduction

Great UX starts with two basic principles - ease of use and simplicity. Selecting a color should be as easy as moving a slider, clicking a checkbox or pressing a key just like other basic form elements behave.

This is a flexible and minimalistic color picker. Developed with mobile devices and keyboard usage in mind. Key features:

  • Small size - 3.6 KB gzipped (JS and CSS combined)
  • Supports touch devices
  • Optimized animations
  • Ease of use
    • Double click anywhere to move the knob to a color
    • Tab to focus the picker
    • or arrow key to increase hue. Shift + ↑/→ to go quicker and Ctrl + ↑/→ to go even quicker.
    • or arrow key to decrease hue. Shift + ↓/← to go quicker and Ctrl + ↓/← to go even quicker.
    • Enter to select a color and close the picker or to open it
    • Mouse ScrollUp to increase and ScrollDown to decrease hue (Opt-in)

Ecosystem

The right color picker, but not the framework you're looking for?

Quick Links

Demos

Usage

With Module Build System

Color Picker on npm

npm install @radial-color-picker/vue-color-picker

And in your app:

<template>
    <color-picker v-bind="color" @input="onInput"></color-picker>
</template>

<script>
import ColorPicker from '@radial-color-picker/vue-color-picker';

export default {
    components: { ColorPicker },
    data() {
        return {
            color: {
                hue: 50,
                saturation: 100,
                luminosity: 50,
                alpha: 1
            },
        };
    },
    methods: {
        onInput(hue) {
            this.color.hue = hue;
        },
    },
};
</script>

<style>
@import '[email protected]/vue-color-picker/dist/vue-color-picker.min.css';
</style>

Depending on your build tool of choice you may have to setup the appropriate loaders or plugins. Checkout the examples folder. There's an example with Vue CLI 3 and Nuxt.js. If you're using vue-cli or poi you don't have to do anything else - these tools come preconfigured and support CSS/SCSS import out of the box.

UMD version

You can also use the minified sources directly:

<head>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.js"></script>
    <link href="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css" rel="stylesheet">
</head>
<body>
    <color-picker v-bind="color" @input="onInput"></color-picker>

    <script>
        var ColorPicker = window.VueColorPicker;

        var app = new Vue({
            el: '#app',
            components: {
                ColorPicker: ColorPicker
            },
            data: {
                color: {
                    hue: 50,
                    saturation: 100,
                    luminosity: 50,
                    alpha: 1
                }
            },
            methods: {
                onInput: function(hue) {
                    this.color.hue = hue;
                }
            }
        });
    </script>
</body>

Back To Top

Options

<color-picker> component has several props and events. See the "with-config" example which uses all options.

Props

Name Type Default Description
hue Number 0 A number between 0-359. Required.
saturation Number 100 A number between 0-100
luminosity Number 50 A number between 0-100
alpha Number 1 A number between 0-1
disabled Boolean false A boolean to disable UI interactions
variant String collapsible Use persistent to prevent collapsing/closing
mouse-scroll Boolean false Use wheel (scroll) event to rotate.
step Number 2 Amount of degrees to rotate the picker with keyboard and/or wheel.
initiallyCollapsed Boolean false Hides the palette initially

Events

Name Description
input Emitted every time the color changes (i.e. rotation of the wheel).
change Emitted when the user dismisses the color picker (i.e. interacting with the middle color well).

Back To Top

First Asked Questions

What's the browser support?

The last two versions of major browsers (Chrome, Safari, Firefox, Edge) are supported though it will probably work in other browsers, webviews and runtimes as well.

How to select other shades of the solid colors?

We suggest to add a custom slider for saturation and luminosity or use <input type="range">.

Why HSL?

Regular HEX color format is limitting (no alpha channel) and browser support for HSLA is great. It's also sometimes more intuitive to work with HSLA notation since hue and angles map 1:1. Primary red color is at 0º, primary green is at 120º and gold for example sits somewhere in between. When a user rotates the wheel the hue is updated respectively. The saturation, luminosity and alpha props are display-only values - you can only change the hue.

The value of an <input> element of type "color" is a 7-character string specifying an RGB color in hexadecimal format. In addition, colors with an alpha channel are not supported; specifying a color in 9-character hexadecimal notation (e.g. #009900aa) will also result in the color being set to "#000000".

Setting The Value of input of type color - MDN

Why exactly input/change events?

Event names are based on the HTML <input type="color">

As is the case with other <input> types, there are two events that can be used to detect changes to the color value: input and change. input is fired on the <input> element every time the color changes. The change event is fired when the user dismisses the color picker.

Tracking color change of input of type color - MDN

Why does Google Chrome throw a [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. warning in the console?

touchmove is used with preventDefault() to block scrolling on mobile while rotating the color knob. Even the Web Incubator Community Group acknowledges that in some cases a passive event listener can't be used.

Why is the scroll-to-rotate functionality not turned on by default?

It's another non-passive event that could potentially introduce jank on scroll. To rotate the color knob, but stay on the same scrolling position the wheel event is blocked with preventDefault(). Thus, if you really want this feature for your users you'll have to explicitly add :mouse-scroll="true".


Back To Top

Change log

Please see Releases for more information on what has changed recently.

Back To Top

Migration from v1

Straight forward - v-model becomes v-bind and you need to add the @input event (which was previously added by the v-model directive implicitly).

<template>
-   <color-picker v-model="color"></color-picker>
+   <color-picker v-bind="color" @input="onInput"></color-picker>
</template>

<script>
import ColorPicker from '@radial-color-picker/vue-color-picker';

export default {
    components: { ColorPicker },
    data() {
        return {
            color: {
                hue: 50,
                saturation: 100,
                luminosity: 50,
                alpha: 1
            },
        };
    },
+   methods: {
+       onInput: function(hue) {
+           this.color.hue = hue;
+       }
+   }
};

Back To Top

Contributing

If you're interested in the project you can help out with feature requests, bugfixes, documentation improvements or any other helpful contributions. You can use the issue list of this repo for bug reports and feature requests and as well as for questions and support.

Please see CONTRIBUTING and CODE_OF_CONDUCT for details.

Back To Top

Credits

This component is based on the great work that was done for the AngularJs color picker.

Back To Top

License

The MIT License (MIT). Please see License File for more information.

Back To Top

Github Repository

Tags: #Vue.js