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](https://user-images.githubusercontent.com/6402557/39788944-c86fd9f2-52e1-11e8-91f1-cb89cec6bf77.png)
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](https://user-images.githubusercontent.com/6402557/39788946-c8b784d2-52e1-11e8-9922-841bb6331d48.png)
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](https://user-images.githubusercontent.com/6402557/39788945-c88ae45e-52e1-11e8-98ec-f73600cc505d.png)
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](https://user-images.githubusercontent.com/6402557/39789354-331a636a-52e4-11e8-9464-6627b3e11add.png)