import Knob from 'primevue/knob';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/knob/knob.min.js"></script>
Knob is an input component and used with the standard v-model directive.
<Knob v-model="value" />
data() {
return {
value: 0
}
}
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 factor is 1 by default and can be customized with step option.
<Knob v-model="value" :step="10" />
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" />
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" />
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| modelValue | number | null | Value of the component. |
| size | number | 100 | Size of the component in pixels. |
| disabled | boolean | false | When present, it specifies that the component should be disabled. |
| readonly | boolean | false | When present, it specifies that the component value cannot be edited. |
| tabindex | number | null | Index of the element in tabbing order. |
| step | number | null | Step factor to increment/decrement the value. |
| min | number | 0 | Mininum boundary value. |
| max | number | 100 | Maximum boundary value. |
| valueColor | string | null | Background of the value. |
| rangeColor | string | null | Background color of the range. |
| textColor | number | null | Color of the value text. |
| strokeWidth | number | 14 | Width of the knob stroke. |
| showValue | boolean | true | Whether the show the value inside the knob. |
| valueTemplate | string | {value} | Template string of the value. |
| aria-label | string | null | Defines a string value that labels an interactive element. |
| aria-labelledby | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
| Name | Parameters | Description |
|---|---|---|
| change | value: New value | Callback to invoke when the value changes. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-knob | Container element. |
| p-knob-text | Text element. |
| p-knob-value | Value element. |
| p-knob-text | Text element. |
Knob element component uses slider role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby and aria-label props.
<span id="label_number">Number</span>
<Knob aria-labelledby="label_number" />
<Knob aria-label="Number" />
| Key | Function |
|---|---|
| tab | Moves focus to the slider. |
| left arrow down arrow | Decrements the value. |
| right arrow up arrow | Increments the value. |
| home | Set the minimum value. |
| end | Set the maximum value. |
| page up | Increments the value by 10 steps. |
| page down | Decrements the value by 10 steps. |
None.
PrimeVue Knob has no dependency however implementation is derived and inspired from vue-knob-control component authored by kramer99.