Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add 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.

Free Component — The Slider is included in Aura UI Free.

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.

Basic Usage

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

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.

Variants / Examples

Show Current Value

0 100 
<x-aura::slider label="Brightness" :min="0" :max="100" :value="75" :showValue="true" />
<x-aura::slider
    label="Brightness"
    :min="0"
    :max="100"
    :value="75"
    :showValue="true"
    wire:model.live="brightness"
/>

Currency Prefix

$
$0 $1000 
<x-aura::slider label="Budget" :min="0" :max="1000" :step="50" :value="400" :showValue="true" prefix="$" />
<x-aura::slider
    label="Budget"
    :min="0"
    :max="1000"
    :step="50"
    :value="400"
    :showValue="true"
    prefix="$"
    wire:model.live="budget"
/>

Unit Suffix

km
0 km 200 km 
<x-aura::slider label="Distance" :min="0" :max="200" :step="5" :value="80" :showValue="true" suffix=" km" />
<x-aura::slider
    label="Distance"
    :min="0"
    :max="200"
    :step="5"
    :value="80"
    :showValue="true"
    suffix=" km"
    wire:model.live="distance"
/>

Decimal Step

0 5 
<x-aura::slider label="Rating" :min="0" :max="5" :step="0.5" :value="3.5" :showValue="true" />
<x-aura::slider
    label="Rating"
    :min="0"
    :max="5"
    :step="0.5"
    :value="3.5"
    :showValue="true"
    wire:model.live="rating"
/>

Disabled

0 100 
<x-aura::slider label="Disabled Slider" :value="40" disabled />
<x-aura::slider label="Disabled Slider" :value="40" :disabled="true" />

With Error State

0 100 
<x-aura::slider label="Volume" error="Value must be above 20." />
<x-aura::slider
    label="Volume"
    error="Value must be above 20."
    wire:model="volume"
/>

Livewire Integration

<x-aura::slider
    label="Budget (EUR)"
    :min="0"
    :max="10000"
    :step="100"
    :value="$budget"
    :showValue="true"
    prefix="€"
    wire:model.live.debounce.300ms="budget"
/>

class PropertyFilter extends Component
{
    public int $budget = 5000;

    public function updatedBudget(): void
    {
        $this->dispatch('filters-changed');
    }
}

Accessibility

  • The underlying <input type="range"> is fully keyboard-accessible natively.
  • Arrow Left/Down decreases the value by one step; Arrow Right/Up increases it.
  • Home sets the value to the minimum; End sets it to the maximum.
  • When a label is provided, it is rendered as a <label> element above the slider.
  • The disabled state sets the HTML disabled attribute on the range input.
  • Error messages are rendered in a <p> tag styled with the aura-input-error-text class.
  • All additional HTML attributes (including aria-*, id) are forwarded to the outer wrapper via Blade's attribute bag.