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
}
Preview:
Changelog:
v0.4.2 (01/07/2021)
- Fix click event to trigger on label
Download Details:
Author: websanova
Live Demo: https://vue-knob.websanova.com/default
Download Link: https://github.com/websanova/vue-knob/archive/master.zip
Official Website: https://github.com/websanova/vue-knob
Install & Download:
# NPM
$ npm i @websanova/vue-knob --save