<template>
<AppDoc name="KnobDemo" :sources="sources">
<h5>Import via Module</h5>
<pre v-code.script><code>
import Knob from 'primevue/knob';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code><code>
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/knob/knob.min.js"></script>
</code></pre>
<h5>Getting Started</h5>
<p>Knob is an input component and used with the standard <i>v-model</i> directive.</p>
<pre v-code><code>
<Knob v-model="value" />
</code></pre>
<pre v-code.script><code>
data() {
return {
value: 0
}
}
</code></pre>
<h5>Minimum and Maximum</h5>
<p>Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.</p>
<pre v-code><code>
<Knob v-model="value" :min="-50" :max="10" />
</code></pre>
<h5>Step</h5>
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
<pre v-code><code>
<Knob v-model="value" :step="10" />
</code></pre>
<h5>Styling</h5>
<p>
<i>valueColor</i> defines the value color, <i>rangeColor</i> defines the range background and similarly <i>textColor</i> configures the color of the value text. In addition, <i>strokeWidth</i> is used to determine the width of the stroke
of range and value sections.
</p>
<pre v-code><code>
<Knob v-model="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
</code></pre>
<h5>Size</h5>
<p>Default size of the Knob is 100 pixels for width and height, use the <i>size</i> property to customize it per your requirements.</p>
<pre v-code><code>
<Knob v-model="value" :size="200" />
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>number</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>size</td>
<td>number</td>
<td>100</td>
<td>Size of the component in pixels.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>readonly</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component value cannot be edited.</td>
</tr>
<tr>
<td>tabindex</td>
<td>number</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>step</td>
<td>number</td>
<td>null</td>
<td>Step factor to increment/decrement the value.</td>
</tr>
<tr>
<td>min</td>
<td>number</td>
<td>0</td>
<td>Mininum boundary value.</td>
</tr>
<tr>
<td>max</td>
<td>number</td>
<td>100</td>
<td>Maximum boundary value.</td>
</tr>
<tr>
<td>valueColor</td>
<td>string</td>
<td>null</td>
<td>Background of the value.</td>
</tr>
<tr>
<td>rangeColor</td>
<td>string</td>
<td>null</td>
<td>Background color of the range.</td>
</tr>
<tr>
<td>textColor</td>
<td>number</td>
<td>null</td>
<td>Color of the value text.</td>
</tr>
<tr>
<td>strokeWidth</td>
<td>number</td>
<td>14</td>
<td>Width of the knob stroke.</td>
</tr>
<tr>
<td>showValue</td>
<td>boolean</td>
<td>true</td>
<td>Whether the show the value inside the knob.</td>
</tr>
<tr>
<td>valueTemplate</td>
<td>string</td>
<td>{value}</td>
<td>Template string of the value.</td>
</tr>
<tr>
<td>aria-label</td>
<td>string</td>
<td>null</td>
<td>Defines a string value that labels an interactive element.</td>
</tr>
<tr>
<td>aria-labelledby</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>value: New value</td>
<td>Callback to invoke when the value changes.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-knob</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-knob-text</td>
<td>Text element.</td>
</tr>
<tr>
<td>p-knob-value</td>
<td>Value element.</td>
</tr>
<tr>
<td>p-knob-text</td>
<td>Text element.</td>
</tr>
</tbody>
</table>
</div>
<h5>Accessibility</h5>
<h6>Screen Reader</h6>
<p>
Knob element component uses <i>slider</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> and
<i>aria-label</i> props.
</p>
<pre v-code><code>
<span id="label_number">Number</span>
<Knob aria-labelledby="label_number" />
<Knob aria-label="Number" />
</code></pre>
<h6>Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the slider.</td>
</tr>
<tr>
<td>
<span class="inline-flex flex-column">
<i class="mb-1">left arrow</i>
<i>down arrow</i>
</span>
</td>
<td>Decrements the value.</td>
</tr>
<tr>
<td>
<span class="inline-flex flex-column">
<i class="mb-1">right arrow</i>
<i>up arrow</i>
</span>
</td>
<td>Increments the value.</td>
</tr>
<tr>
<td><i>home</i></td>
<td>Set the minimum value.</td>
</tr>
<tr>
<td><i>end</i></td>
<td>Set the maximum value.</td>
</tr>
<tr>
<td><i>page up</i></td>
<td>Increments the value by 10 steps.</td>
</tr>
<tr>
<td><i>page down</i></td>
<td>Decrements the value by 10 steps.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
<h5>Knob Vue</h5>
<p>PrimeVue Knob has no dependency however implementation is derived and inspired from <a href="https://github.com/kramer99/vue-knob-control">vue-knob-control</a> component authored by <a href="https://github.com/kramer99">kramer99</a>.</p>
</AppDoc>
</template>
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Options API Source',
content: `
<template>
<div>
<div class="grid formgrid text-center">
<div class="field col-12 md:col-4">
<h5>Basic</h5>
<Knob v-model="value1" />
</div>
<div class="field col-12 md:col-4">
<h5>Readonly</h5>
<Knob v-model="value2" readonly />
</div>
<div class="field col-12 md:col-4">
<h5>Disabled</h5>
<Knob v-model="value3" disabled />
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Min/Max</h5>
<Knob v-model="value4" :min="-50" :max="50" />
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Step</h5>
<Knob v-model="value5" :step="10" />
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Template</h5>
<Knob v-model="value6" valueTemplate="{value}%" />
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Stroke</h5>
<Knob v-model="value7" :strokeWidth="5" />
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Size</h5>
<Knob v-model="value8" :size="200"/>
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Color</h5>
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
</div>
<div class="field col-12 md:col-4">
<h5>Reactive Knob</h5>
<Knob v-model="value10" :size="150" readonly />
<Button label="Increment" @click="value10++" class="mr-2" :disabled="value10 >= 100" />
<Button label="Decrement" @click="value10--" :disabled="value10 <= 0" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value1: 0,
value2: 50,
value3: 75,
value4: 10,
value5: 40,
value6: 60,
value7: 40,
value8: 60,
value9: 50,
value10: 0
}
}
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API Source',
content: `
<template>
<div>
<div class="grid formgrid text-center">
<div class="field col-12 md:col-4">
<h5>Basic</h5>
<Knob v-model="value1" />
</div>
<div class="field col-12 md:col-4">
<h5>Readonly</h5>
<Knob v-model="value2" readonly />
</div>
<div class="field col-12 md:col-4">
<h5>Disabled</h5>
<Knob v-model="value3" disabled />
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Min/Max</h5>
<Knob v-model="value4" :min="-50" :max="50" />
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Step</h5>
<Knob v-model="value5" :step="10" />
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Template</h5>
<Knob v-model="value6" valueTemplate="{value}%" />
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Stroke</h5>
<Knob v-model="value7" :strokeWidth="5" />
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Size</h5>
<Knob v-model="value8" :size="200"/>
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Color</h5>
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
</div>
<div class="field col-12 md:col-4">
<h5>Reactive Knob</h5>
<Knob v-model="value10" :size="150" readonly />
<Button label="Increment" @click="value10++" class="mr-2" :disabled="value10 >= 100" />
<Button label="Decrement" @click="value10--" :disabled="value10 <= 0" />
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value1 = ref(0);
const value2 = ref(50);
const value3 = ref(75);
const value4 = ref(10);
const value5 = ref(40);
const value6 = ref(60);
const value7 = ref(40);
const value8 = ref(60);
const value9 = ref(50);
const value10 = ref(0);
return { value1, value2, value3, value4, value5, value6, value7, value8, value9, value10 }
}
}
<\\/script>
`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/knob/knob.min.js"><\\/script>`,
content: `<div id="app">
<div class="grid formgrid text-center">
<div class="field col-12 md:col-4">
<h5>Basic</h5>
<p-knob v-model="value1"></p-knob>
</div>
<div class="field col-12 md:col-4">
<h5>Readonly</h5>
<p-knob v-model="value2" readonly></p-knob>
</div>
<div class="field col-12 md:col-4">
<h5>Disabled</h5>
<p-knob v-model="value3" disabled></p-knob>
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Min/Max</h5>
<p-knob v-model="value4" :min="-50" :max="50"></p-knob>
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Step</h5>
<p-knob v-model="value5" :step="10"></p-knob>
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Template</h5>
<p-knob v-model="value6" value-template="{value}%"></p-knob>
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Stroke</h5>
<p-knob v-model="value7" :stroke-width="5"></p-knob>
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Size</h5>
<p-knob v-model="value8" :size="200"></p-knob>
</div>
<div class="field col-12 md:col-4">
<h5 class="mt-3">Color</h5>
<p-knob v-model="value9" value-color="SlateGray" range-color="MediumTurquoise"></p-knob>
</div>
<div class="field col-12 md:col-4">
<h5>Reactive Knob</h5>
<p-knob v-model="value10" :size="150" readonly></p-knob>
<p-button label="Increment" @click="value10++" class="mr-2" :disabled="value10 >= 100"></p-button>
<p-button label="Decrement" @click="value10--" :disabled="value10 <= 0"></p-button>
</div>
</div>
</div>
<script type="module">
const { createApp, ref } = Vue;
const App = {
setup() {
const value1 = ref(0);
const value2 = ref(50);
const value3 = ref(75);
const value4 = ref(10);
const value5 = ref(40);
const value6 = ref(60);
const value7 = ref(40);
const value8 = ref(60);
const value9 = ref(50);
const value10 = ref(0);
return { value1, value2, value3, value4, value5, value6, value7, value8, value9, value10 }
},
components: {
"p-knob": primevue.knob,
"p-button": primevue.button
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
`
}
}
};
}
};
</script>