Knob

Rotary dial on a native range input

For compact settings in a dense panel — a mixer, an editor's inspector — where a row of knobs fits in the width one slider takes. Anywhere else use Slider: the whole range is visible and it is more precise with a mouse.

Basic

35%

Volume

3

Rating

-20 dB

Gain

70

Locked

drag the dial · keyboard via the native range

<script setup lang="ts">
import { ref } from "vue";
import { BlessKnob } from "blessing-ui";
const vol = ref(35);
const rating = ref(3);
const gain = ref(-20);
</script>

<template>
  <div class="row" style="gap: 32px; align-items: flex-end">
    <BlessKnob v-model="vol" label="Volume" :format="(v) => `${v}%`" />
    <BlessKnob v-model="rating" :min="1" :max="5" size="sm" label="Rating" />
    <BlessKnob
      v-model="gain"
      :min="-60"
      :max="12"
      :step="0.5"
      size="lg"
      label="Gain"
      :sweep="300"
      :format="(v) => `${v} dB`"
    />
    <BlessKnob :model-value="70" disabled label="Locked" />
    <small>drag the dial · keyboard via the native range</small>
  </div>
</template>

• Drag round the dial, or click a point on it. Turning past either end holds at that end instead of wrapping to the other.
• The keyboard is the native range underneath: arrows step, Page Up/Down jump, Home/End go to the ends.
• format sets the value both shown in the dial and read out (35%, -20 dB). sweep is the arc in degrees, gap at the bottom.
• label shows under the dial. Inside a Field the field's label names it instead.

Usage

import { BlessKnob } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
min	number	0
max	number	100
step	number	1
size	"md" | "sm" | "lg"	"md"
label	string	—	visible label under the dial; inside a BlessField the field's label is used instead
showValue	boolean	true
format	((v: number) => string)	—
disabled	boolean	—
sweep	number	270	degrees of arc, centred at the bottom gap
modelValue	number	0

Events

Name	Payload	Description
update:modelValue	[value: number]