Vue3 Knob

Vue Knob is a form component to define number inputs with a dial. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Knob from 'primevue/knob';

Getting Started

Knob is an input component and used with the standard v-model directive.

<Knob v-model="value" />

data() {
    return {
        value: 0
    }
}

Minimum and Maximum

Boundaries are configured with the min and max values whose defaults are 0 and 100 respectively.

<Knob v-model="value" :min="-50" :max="10" />

Step

Step factor is 1 by default and can be customized with step option.

<Knob v-model="value" :step="10" />

Styling

valueColor defines the value color, rangeColor defines the range background and similarly textColor configures the color of the value text. In addition, strokeWidth is used to determine the width of the stroke of range and value sections.

<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise"  />

Size

Default size of the Knob is 100 pixels for width and height, use the size property to customize it per your requirements.

<Knob v-model="value" :size="200" />

Theming

Knob supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Knob showcase for demos and documentation.