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