vue-knob-control

A rotary knob control for Vue.js

Install

npm install vue-knob-control -S

Usage

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

Vue.use(VueKnobControl)

Examples

Most basic usage:

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

Specifying minimum and maximum values, note that the value arc is drawn from the calculated zero point. We have also made the arc appear thinner:

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

Changing size and colors:

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

You can also pass a function to alter the value text displayed:

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>
four

GitHub