DEV Community

loading...
Cover image for Vue3 Knob

Vue3 Knob

primetek profile image PrimeTek ・1 min read

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';
Enter fullscreen mode Exit fullscreen mode

Getting Started

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

<Knob v-model="value" />
Enter fullscreen mode Exit fullscreen mode
data() {
    return {
        value: 0
    }
}
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

Step

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

<Knob v-model="value" :step="10" />
Enter fullscreen mode Exit fullscreen mode

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"  />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide