Vue Gradient Slider

Install

npm install _____

Usage

<GradientPicker v-model="colors" @select="selectKnob" />

export default {
  data: () => ({
    selectedKnob: 0,
    colors: [
      {
        position: 0.12,
        color: "#FF00AA",
      },
      {
        position: 0.46,
        color: "#A300FF",
      },
      {
        position: 0.84,
        color: "#00AAFF",
      },
    ],
  }),
  methods: {
    selectKnob(value) {
      this.selectedKnob = value;
    },
  },
};

What about the color picker?

Use any color picker you want. Often UI frameworks come with their own version of a color picker. If yours doesn't, Here's my recomendation:

• Vue color

Usage with Vue color

To be updated