Laravel Slider Component

Free · MIT

Range slider input for selecting numeric values within a defined range, with optional value display, color variants, and prefix/suffix labels.

A Slider built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::slider>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::slider
    label="Volume"
    :min="0"
    :max="100"
    :value="50"
    :showValue="true"
    wire:model.live="volume"
/>

See the full API, props and live examples in the Slider documentation.

Overview

The <x-aura::slider> component renders a styled <input type="range"> for selecting a numeric value. It supports an inline current-value display, optional prefix/suffix labels (e.g. currency symbols or units), multiple color variants, and full Livewire wire:model integration.

Props

Prop	Type	Default	Description
`label`	`string\|null`	`null`	Label text displayed above the slider.
`min`	`int\|float`	`0`	Minimum selectable value.
`max`	`int\|float`	`100`	Maximum selectable value.
`step`	`int\|float`	`1`	Increment between selectable values.
`value`	`int\|float\|null`	`null`	Initial value. Defaults to `min` when `null`.
`showValue`	`bool`	`false`	Display the current value inline next to the label.
`disabled`	`bool`	`false`	Disable the slider.
`error`	`string\|null`	`null`	Error message displayed below the slider, applying error styling.
`hint`	`string\|null`	`null`	Help text displayed below the slider. Hidden when an error is present.
`color`	`string`	`'primary'`	Color variant applied to the track fill. Uses CSS class `aura-slider-{color}`.
`prefix`	`string\|null`	`null`	Text prepended to the value display and the min/max labels.
`suffix`	`string\|null`	`null`	Text appended to the value display and the min/max labels.