A rotary knob control for Vue.js

npm install vue-knob-control -S

import Vue from 'vue'
import VueKnobControl from 'vue-knob-control'

Vue.use(VueKnobControl)

<knob-control v-model="someValue"></knob-control>

<knob-control
  :min="-12"
  :max="12"
  :stroke-width="8"
  v-model="semitone"
></knob-control>

<knob-control
  :min="-64"
  :max="63"
  :size="75"
  primary-color="#E844C3"
  secondary-color="#E7B6DC"
  text-color="#E844C3"
  v-model="detune"
></knob-control>

toWord: function(val) {
    const map = {
        0: 'zero',
        1: 'one',
        2: 'two',
        3: 'three',
        4: 'four',
    }
    return map[val];
}

<knob-control
  :min="0"
  :max="4"
  :value-display-function="toWord"
  v-model="val"
></knob-control>