Radial Color Picker For Vue.js

A lightweight, modern, touch-enabled, fully accessible color picker for Vue 3 and Vue 2.

How to use it:

1. Import and register the color picker component.

import { reactive } from 'vue';
import ColorPicker from '@radial-color-picker/vue-color-picker';
@import '@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css';

export default {
  components: { ColorPicker },
};

2. Add the color picker component in your app.

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

export default {
  components: { ColorPicker },
  setup() {
    const color = reactive({
      hue: 50,
      saturation: 100,
      luminosity: 50,
      alpha: 1,
    });
    return {
      color,
      onInput(hue) {
        color.hue = hue;
      },
    };
  },
};

3. All possible props.

hue: {
  default: 0,
},
saturation: {
  default: 100,
},
luminosity: {
  default: 50,
},
alpha: {
  default: 1,
},
step: {
  default: 1,
},
mouseScroll: {
  default: false,
},
variant: {
  default: 'collapsible', // collapsible | persistent
},
disabled: {
  default: false,
},
initiallyCollapsed: {
  default: false,
},
ariaLabel: {
  default: 'color picker',
},
ariaRoledescription: {
  default: 'radial slider',
},
ariaValuetext: {
  default: '',
},
ariaLabelColorWell: {
  default: 'color well',
},

Preview:

Changelog:

v5.0.1 (10/24/2021)

• Official Vue 3 support and while it is compatible with Vue 2 via @vue/compat it still is a breaking change
• While Nuxt v3 is in Beta the module @radial-color-picker/vue-color-picker/nuxt will be disabled and you’ll have to manually add the CSS file and register the component as a regular Vue component.
• Dropping support for iOS Safari v12.2 and MS Edge 18 (the non-Chromium version).
• refactor: remove MS Edge 18 transparency hack
• refactor: remove conic-gradient polyfill

Download Details:

Author: radial-color-picker

Live Demo: https://codepen.io/rkunev/pen/zjEmwV/

Download Link: https://github.com/radial-color-picker/vue-color-picker/archive/master.zip

Official Website: https://github.com/radial-color-picker/vue-color-picker

Install & Download:

# NPM
$ npm install @radial-color-picker/vue-color-picker --save