Laravel Range Slider Component

Free · MIT

Two handles on one track, for picking a range instead of a single value.

A Range Slider built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::range-slider>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<x-aura::range-slider name="price" label="Price" :min="0" :max="500" :from="120" :to="380" prefix="€" />

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

Overview

<x-aura::range-slider> selects a range — a price band, a date window, a size filter. For a single value use Slider.

Props

Prop	Type	Default	Description
`min`	`numeric`	`0`	Lower bound of the track.
`max`	`numeric`	`100`	Upper bound of the track.
`step`	`numeric`	`1`	Increment.
`from`	`numeric\|null`	`min`	Starting value of the lower handle.
`to`	`numeric\|null`	`max`	Starting value of the upper handle.
`label`	`string\|null`	`null`	Label above the track.
`showValues`	`bool`	`true`	Show the current range beside the label.
`prefix` / `suffix`	`string\|null`	`null`	Wrap the displayed values, e.g. `€` or `km`.
`color`	`string`	`'primary'`	`primary`, `success`, `warning`, `danger`.
`hint` / `error`	`string\|null`	`null`	Help text / error message.