Vue Gradient Slider

Install

npm install vue-gradient-slider
# or
yarn add vue-gradient-slider

Demo

See Demo Site

Usage

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

import GradientSlider from 'vue-gradient-slider'

export default {
  components: {
    GradientSlider
  },
  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;
    },
  },
};