Vue Color Gradient Picker is an easy gradient color picker component for Vue.js.

simple color picker javascript, javascript color gradient based on value, jquery gradient color picker, xn color picker, multiple color picker jquery

A Simple and Easy-to-Use Vanilla JS Color Picker With Alpha Selection

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-color-gradient-picker

# NPM
$ npm i vue-color-gradient-picker --save

1. Import the color picker component.

import { ColorPicker } from ‘vue-color-gradient-picker’;

2. Create a normal color picker.

<template>
  <div id="app">
    <ColorPicker
      :color="color"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />
  </div>
</template>

export default {
  name: 'App',
  components: {
    ColorPicker
  },
  data()  {
    return {
      color: {
        red: 255,
        green: 0,
        blue: 0,
        alpha: 1
      }
    }
  },   
  methods: {
    onChange(attrs, name) {
      this.color = { ...attrs };
    }
  }

3. Create a gradient color picker.

<template>
  <div id="app">
    <ColorPicker
      :gradient="gradient"
      :isGradient="true"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />
  </div>
</template>

export default {
  name: 'App',
  components: {
    ColorPicker
  },
  data()  {
    return {
      gradient: {
        type: 'linear',
        degree: 0,
        points: [
          {
            left: 0,
            red: 0,
            green: 0,
            blue: 0,
            alpha: 1
          },
          {
            left: 100,
            red: 255,
            green: 0,
            blue: 0,
            alpha: 1
          }
        ]      
      }
    }
  },   
  methods: {
    onChange(attrs, name) {
      console.log(name);
    }
  }
}

Vue Color Gradient Picker Plugin/Github

See Demo And Download

Official Website(arthay): Click Here

This superior jQuery/javascript plugin is developed by arthay. For extra Advanced usage, please go to the official website.