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 C…


This content originally appeared on DEV Community and was authored by PrimeTek

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.


This content originally appeared on DEV Community and was authored by PrimeTek


Print Share Comment Cite Upload Translate Updates
APA

PrimeTek | Sciencx (2021-02-12T16:43:07+00:00) Vue3 Knob. Retrieved from https://www.scien.cx/2021/02/12/vue3-knob/

MLA
" » Vue3 Knob." PrimeTek | Sciencx - Friday February 12, 2021, https://www.scien.cx/2021/02/12/vue3-knob/
HARVARD
PrimeTek | Sciencx Friday February 12, 2021 » Vue3 Knob., viewed ,<https://www.scien.cx/2021/02/12/vue3-knob/>
VANCOUVER
PrimeTek | Sciencx - » Vue3 Knob. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/12/vue3-knob/
CHICAGO
" » Vue3 Knob." PrimeTek | Sciencx - Accessed . https://www.scien.cx/2021/02/12/vue3-knob/
IEEE
" » Vue3 Knob." PrimeTek | Sciencx [Online]. Available: https://www.scien.cx/2021/02/12/vue3-knob/. [Accessed: ]
rf:citation
» Vue3 Knob | PrimeTek | Sciencx | https://www.scien.cx/2021/02/12/vue3-knob/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts