Slider

x-slider

A range slider for picking a value within a range. Themed with the primary accent color across browsers, with an optional label and live value readout. Works with wire:model.

php artisan components:add slider

Examples

Basic

A labeled slider with a live value readout, and a bare one.

Preview Code

<div class="grid w-full max-w-md justify-center gap-6">
    <x-components.slider label="Volume" :value="60" show-value />
    <x-components.slider :value="30" />
</div>

Props

Prop	Type	Default	Description
label	text	—	Optional label rendered above the slider.
min	text	0	Minimum value.
max	text	100	Maximum value.
step	text	1	Increment between values.
showValue	boolean	false	Show the current value next to the label.