Vue.js Native Radial RGB Hexadecimal Color Picker Using radial-color-picker Library in Javascript Full Project For Beginners

Vue.js Native Radial RGB Hexadecimal Color Picker Using radial-color-picker Library in Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a native radial rgb hexadecimal color picker using radial-color-picker library in vue.js using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to install the below library using the npm command as shown below

 

Usage

Color Picker on npm

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

 

 

For all the images and javascript files you can download the full github repository as shown below

 

DOWNLOAD SOURCE CODE

 

After downloading it the directory structure will look something like this

See also  Vue.js Tinder Like Card Swing or Swipe UI Clone Using vue-tinder Library in Javascript Full Project For Beginners

 

 

 

Basic Example

 

 

<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 '~@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css';
</style>

 

 

 

Working with non-primary colors

 

 

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

<script>
export default {
    name: 'example-non-primary',
    data() {
        return {
            color: {
                hue: 338,
                saturation: 91,
                luminosity: 57,
                alpha: 0.95,
            },
        };
    },
    methods: {
        updateColor(hue) {
            this.color.hue = hue;
        },
    },
};
</script>

 

 

Radial Color Picker Demo – Vue

 

 

 

 

Leave a Reply