Knob

1<script setup lang="ts">2import { Knob, StackPanel } from '@vitral/vue';3import { ref } from 'vue';4 5const volume = ref(60);6</script>7 8<template>9    <StackPanel spacing="0.375rem">10        <span id="knob-volume">Volume</span>11        <Knob v-model="volume" aria-labelledby="knob-volume" value-template="{value}%" />12    </StackPanel>13</template>

1<script setup lang="ts">2import { Knob } from '@vitral/vue';3import { ref } from 'vue';4 5const temperature = ref(21);6const balance = ref(0);7</script>8 9<template>10    <Knob v-model="temperature" :min="16" :max="30" :step="0.5" :size="140" :stroke-width="10" value-template="{value}°C" aria-label="Temperature" />11    <Knob v-model="balance" :min="-50" :max="50" value-color="var(--vt-help-color)" aria-label="Balance" />12</template>

1<script setup lang="ts">2import { Knob } from '@vitral/vue';3</script>4 5<template>6    <Knob :model-value="75" readonly aria-label="Battery" value-template="{value}%" />7    <Knob :model-value="30" disabled aria-label="Disabled" />8</template>