Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add range-slider

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

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

Basic Usage

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

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.

Submitted values

With a name, the two handles submit as name[from] and name[to]:

<x-aura::range-slider name="price" :min="0" :max="500" />
{{-- request()->input('price.from'), request()->input('price.to') --}}

The handles are not forced to stay in order — the component reads them as the smaller and the larger, so dragging one past the other does what the user meant rather than refusing.

Why it is built from two native inputs

The track is two real <input type="range"> elements stacked on top of each other, not divs and pointer arithmetic.

That decision buys the whole of keyboard support for free: arrow keys, Home, End, Page Up and Page Down all work, and every screen reader already knows how to announce a range input's current value, minimum and maximum. A custom-drawn slider has to reimplement all of that, and almost none of them do.

The cost is one CSS rule: the inputs are transparent and would otherwise swallow each other's pointer events, so only the thumbs accept them.

Accessibility

Each handle carries its own accessible name — "Price — Minimum" and "Price — Maximum" — because two controls announced identically are indistinguishable in speech.