Flexible and Minimalistic Radial Color Picker For Vue.js

Radial Color Picker Vue is easy and simple to use. Selecting a color should be as easy as moving a slider, clicking a check box, or pressing a key just as other basic form elements behave.

This is a flexible and minimalistic color picker. It was developed keeping in mind the use of mobile devices and keyboards.

radial color picker react, gradient color picker, vue color picker, color picker code in angular, vue color picker board, vue 3 color picker, how would you implement a color picker with rxjs

Features 

  • Small size – 3.3 KB compressed (JS and CSS combined)
  • Supports touch devices
  • Optimized animation
  • Ease of use
    • Screen reader support.
    • Press the Tab key to focus the picker.
    • ↑ or → arrow key to increase hue. PgUp to go faster.
    • ↓ or → arrow key to decrease hue. PgDown to go faster.
    • Enter to select a color and close or open the picker.
    • Mouse over to increase color and scroll down to decrease color hue (Opt-in).
  • Experimental TypeScript support

How to make use of it:

Install and download:

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

1. Import and register a color picker item.

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 a color picker component to 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',
},

Radial Color Picker For Vue.js Plugin/Github, vue bs color picker


See Demo And Download

Official Website(radial-color-picker): Click Here

This superior jQuery/javascript plugin is developed by radial-color-picker. For extra advanced usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…