Minimal Knob Component For Vue.js

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:

Minimal Knob Component For Vue.js

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

You Might Be Interested In:

Tags:

Add Comment