vue-knob-control

A rotary knob control for Vue.js

Install

npm install vue-knob-control -S

Usage

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

Vue.use(KnobControl)

Examples

Most basic usage:

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

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>

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>

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>

Properties

The only required property is value.

Option	Type	Description	Default
value	Number	Use the v-model attribute to set the value of the control	none
max	Number	Maximum value of the control	100
min	Number	Maximum value of the control	0
stepSize	Number	Smallest increment the value can change by	1
disabled	Boolean	Set to true to disable the knob	false
size	Number	Visual size of the control in px	100
primaryColor	String	Color of the value arc	#409eff
secondaryColor	String	Color of the rest of the control	#dcdfe6
textColor	String	Color of the value text	#000000
strokeWidth	Number	Thickness of the arcs	17
valueDisplayFunction	Function	Custom function to alter the display text	(v) => v