Minimal Knob Component For Vue.js

Install & Download:

# NPM
$ npm i @websanova/vue-knob --save

Description:

A simple plain Vue.js component to create a knob that enables the user to adjust the value by draggable the dial.

Key Features:

Auto Label Layout and Position
Key / Value Pairing for Options
HTML Injection for Labels
Knob Click and Drag
Realistic One Way Rotations
Snap to Label
Custom Angel Positions
No Canvas and SVG required.

Basic usage:

1. Import and register the component.

import Vue from 'vue';
import VueKnob from '@websanova/vue-knob';

Vue.component('el-knob', VueKnob);

2. Create a basic knob component in the app.

<el-knob
  v-model="data.value"
  :options="data.options"
/>

3. Default component props.

value: {
  default: null
},
variant: {
  default: ''
},
size: {
  default: ''
},
options: {
  default() {
    return [];
  }
},
valueKey: {
  default: 'value'
},
labelKey: {
  default: 'label'
},
startAngle: {
  type: Number,
  default: 30
},
endAngle: {
  type: Number,
  default: 330
},
anchorOffset: {
  type: Number,
  default: 0
},
indexSkip: {
  type: Number,
  default: null
},
minSpeed: {
  type: Number,
  default: 0.2
}