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>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php

use Livewire\Component;

class Demo extends Component
{
    public int $level = 50;

    public function render()
    {
        return view('livewire.demo');
    }
}

resources/views/livewire/demo.blade.php

<x-ui.knob wire:model="level" />

API Reference

Props, slots and exposed methods for <x-ui.knob>.

Props

Prop	Type	Default	Description
`name`	`string`	—	When set, a hidden input mirrors the value so the knob submits with the form.
`value`	`number`	`50`	Initial value of the dial.
`min`	`number`	`0`	Lowest value, mapped to the start of the 270 degree arc.
`max`	`number`	`100`	Highest value, mapped to the end of the 270 degree arc.
`step`	`number`	`1`	Granularity for drag, scroll and arrow-key changes. Page Up/Down move by a larger amount.
`size`	`string`	`'default'`	Diameter of the dial and size of the centered value text. `sm` `default` `lg`
`label`	`string`	`'Value'`	Accessible label for the slider.
`disabled`	`bool`	`false`	Disables interaction and dims the dial.