Components

Slider

An input where the user selects a value — single, or a two-handle min–max range.

php artisan blatui:add slider

<div class="w-full max-w-sm">
    <x-ui.slider :value="50" :max="100" :step="1" />
</div>

Disabled

<div class="w-full max-w-sm">
    <x-ui.slider :value="50" :max="100" :step="1" disabled ariaLabel="Disabled value" />
</div>

Range

Price range

{{-- Two handles for a min–max range. A `name` submits {name}[min] and {name}[max]. --}}
<div class="grid w-full max-w-sm gap-3">
    <x-ui.label>Price range</x-ui.label>
    <x-ui.slider range :value="[25, 75]" name="price" aria-label="Price" />
</div>

Steps

<div class="w-full max-w-sm">
    <x-ui.slider :value="40" :min="0" :max="100" :step="10" ariaLabel="Stepped value" />
</div>

Vertical

{{-- Vertical orientation — single and range. --}}
<div class="flex items-start gap-10">
    <x-ui.slider orientation="vertical" :value="40" aria-label="Volume" />
    <x-ui.slider orientation="vertical" range :value="[20, 70]" aria-label="Price range" />
</div>

With Label

Volume 33%

<div class="grid w-full max-w-sm gap-3">
    <div class="flex items-center justify-between">
        <span class="text-sm font-medium">Volume</span>
        <span class="text-muted-foreground text-sm tabular-nums">33%</span>
    </div>
    <x-ui.slider :value="33" :max="100" :step="1" ariaLabel="Volume" />
</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 $volume = 30;

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

resources/views/livewire/demo.blade.php

<x-ui.slider wire:model="volume" />

Single value in default mode; range mode submits via name[min]/name[max].

API Reference

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

Props

Prop	Type	Default	Description
`name`	`string`	—	Form field name. Single mode submits one hidden input; range mode submits "{name}[min]" and "{name}[max]".
`value`	`int\|array`	`0`	Current value. In range mode pass a two-element array [low, high].
`min`	`int`	`0`	Minimum selectable value.
`max`	`int`	`100`	Maximum selectable value.
`step`	`int`	`1`	Increment the value snaps to when dragging or using the keyboard.
`range`	`bool`	`false`	Enable two thumbs for a min–max range. When true, pass value as [low, high].
`orientation`	`string`	`'horizontal'`	Layout direction. Vertical mode needs a height on the slider (defaults to h-40). `horizontal` `vertical`
`disabled`	`bool`	`false`	Disable interaction and dim the control.
`ariaLabel`	`string`	`'Value'`	Accessible label for the thumb(s). In range mode it is suffixed with "minimum"/"maximum".