Vue Knob / Intro / Intro

The vue-knob package is a simple light weight knob component for Vue.js.

Getting Started

If you are new to the package itself then check out the Startup Guide and Demos Guide which contains a fully working vue-cli project example with vue-knob.


The vue-knob component comes with a bunch of standard features out of the box highlighted below.

Auto Label Layout and Position

Just feed in set of knob options and the labels will automatically position.

Key / Value Pairing for Options

Ability to set key/value pairs for the knob value and label options.

HTML Injection for Labels

Supports injecting HTML into labels which allows custom stying for each label, icons and images.

Knob Click and Drag

The knob dials come with the ability to click and drag into position with smooth transitions.

Realistic One Way Rotations

The knob behaves like a real dial which can only rotate up to a certain point making manual click and drag rotations are realistic.

Snap to Label

Turning the knob will automatically snap to it's nearest value to ensure correct values.

Custom Angel Positions

Ability to set specific angle for any label position.

Start / Stop Angles

Set the start and end angle for the label range to auto position between.