Components

Knob

A rotary dial input — drag, scroll or use the keyboard to set a value.

php artisan blatui:add knob

<x-ui.knob :value="50" />

Range

Volume — 0 to 11, step 1

<div class="flex flex-col items-center gap-2">
    <x-ui.knob name="volume" :value="11" :min="0" :max="11" :step="1" label="Volume" />
    <span class="text-muted-foreground text-sm">Volume — 0 to 11, step 1</span>
</div>

Sizes

<div class="flex flex-wrap items-center gap-8">
    <x-ui.knob :value="25" size="sm" label="Small" />
    <x-ui.knob :value="50" label="Default" />
    <x-ui.knob :value="75" size="lg" label="Large" />
</div>