vue-knob-control

A rotary knob control for Vue.js

Install

npm install vue-knob-control -S

Usage

import Vue from 'vue'
import KnobControl from 'vue-knob-control'

Vue.use(KnobControl)

Examples

Most basic usage:

<knob-control v-model="someValue"></knob-control>

Specifying minimum and maximum values, note that the value arc is drawn from the calculated zero point. We have also made the arc appear thinner:

<knob-control
  :min="-12"
  :max="12"
  :stroke-width="8"
  v-model="semitone"
></knob-control>

Changing size and colors:

<knob-control
  :min="-64"
  :max="63"
  :size="75"
  primary-color="#E844C3"
  secondary-color="#E7B6DC"
  text-color="#E844C3"
  v-model="detune"
></knob-control>

You can also pass a function to alter the value text displayed:

toWord: function(val) {
    const map = {
        0: 'zero',
        1: 'one',
        2: 'two',
        3: 'three',
        4: 'four',
    }
    return map[val];
}

<knob-control
  :min="0"
  :max="4"
  :value-display-function="toWord"
  v-model="val"
></knob-control>

Responsive

Set the component responsive.

Size property is always available, be careful if size is more than 100, size is expressed in % in this mode

<knob-control
    :responsive="true"
></knob-control>

Animation:

Disabled by default

animated true|false This will disable/enable knob animation but not value one.

animateValue true|false Same as animation expect for the value.

animationDuration integer, in milliseconds set the duration of both animation.

animationFunction string CSS animation function, all CSS animations are available (eg: linear, ease-in, ease-out, ...).

Examples

Only animate knob itself

<knob-control
    :animation="{
        animated: true
    }"
></knob-control>

Only animate knob value

<knob-control
    :animation="{
        animateValue: true
    }"
></knob-control>

animated and animateValue can be set at the same time

This animation use CSS linear function during 5 sec

<knob-control
    :animation="{
        animated: true,
        animateValue: true,
        animationDuration: '5000',
        animationFunction: 'linear'
    }"
></knob-control>

animationDuration should be expressed in ms (you can use multiplication if you prefer eg: "5 * 1000")

Properties

The only required property is value.

Option | Type | Description | Default -------|------|-------------|-------- value | Number | Use the v-model attribute to set the value of the control | none max | Number | Maximum value of the control | 100 min | Number | Minimum value of the control | 0 stepSize | Number | Smallest increment the value can change by | 1 disabled | Boolean | Set to true to disable the knob | false readOnly | Boolean | Set to true to disable interaction with the knob while showing its value | false size | Number | Visual size of the control in px (or % if responsive is true) | 100 primaryColor | String | Color of the value arc | #409eff secondaryColor | String | Color of the rest of the control | #dcdfe6 textColor | String | Color of the value text | #000000 strokeWidth | Number | Thickness of the arcs | 17 valueDisplayFunction | Function | Custom function to alter the display text | (v) => v responsive | Boolean | Use % instead of px | false animation | Object | Optional animation config object: { animated: false, animateValue: false, animationDuration: 2000 (in ms), animationFunction: 'ease-in-out' } | null