A rotary knob control for Vue.js
npm install vue-knob-control -Simport Vue from 'vue'
import VueKnobControl from 'vue-knob-control'
Vue.use(VueKnobControl)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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent