Knob

Rotary knob/dial: APG slider semantics with angle-mapped pointer dragging.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Knob } from "@vizejs/ui/knob";

Or copy the source into your project with vize lib pull knob (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Volume knob bound with v-model, labelled by visible text and announcing a percentage. -->
<script setup lang="ts">
import { ref, useId } from "vue";

import { Knob } from "@vizejs/ui/knob";

const volume = ref(40);
const labelId = useId();
</script>

<template>
  <div>
    <span :id="labelId">Master volume</span>
    <Knob
      v-slot="{ value }"
      v-model="volume"
      name="volume"
      :min="0"
      :max="100"
      :aria-labelledby="labelId"
      :get-value-text="(value: number) => `${value}%`"
    >
      <span aria-hidden="true">{{ value }}%</span>
    </Knob>
  </div>
</template>

API

Knob

Source: src/families/form/knob/knob.vue

Props

Events

Slots

Exposed

Behavior

Normative state x input -> outcome table for knob.vue (@vizejs/ui/knob), a rotary control with WAI-ARIA APG slider semantics. Angles are degrees clockwise from 12 o'clock over a sweep (default -135° to 135°). Every row is proven by the named test in knob.test.ts or knob-ssr.test.ts; compile-only assertions live in knob.types.test-d.ts.

Public extension contract

The subpath is tree-shakable and ships no CSS; those package contracts are pinned by distribution.test.ts, check:size, and check:tree-shaking.