Skip to content

Pro Component — This component requires an Aura UI Pro license.

Overview

The Slider component provides a draggable range input for selecting numeric values. It supports single value selection, dual-handle range mode for selecting a range of values, customizable step increments, and real-time value display. Integrates with Livewire via wire:model for reactive form data.

Basic Usage

0 100 
<x-aura::slider
    label="Volume"
    name="volume"
    :min="0"
    :max="100"
    :value="50"
/>

Props

Prop Type Default Description
label string '' Label text displayed above the slider.
name string '' Input name attribute, also used for wire:model.
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|array 0 Current value. Pass an array [min, max] for range mode.
showValue bool true Display the current value next to the slider.
range bool false Enable dual-handle range selection.

Examples

Simple Volume Control

0 100 
<x-aura::slider
    label="Volume"
    name="volume"
    :min="0"
    :max="100"
    :step="1"
    :value="75"
    :showValue="true"
/>

Price Range Filter

$ — $
$0 $500 
<x-aura::slider
    label="Price Range"
    name="price_range"
    :min="0"
    :max="1000"
    :step="10"
    :value="[100, 500]"
    :range="true"
    :showValue="true"
    wire:model.live="priceRange"
/>

Decimal Step Values

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

Without Value Display

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

Livewire Integration

<!-- Blade view -->
<div class="space-y-6">
    <x-aura::slider
        label="Budget (EUR)"
        name="budget"
        :min="0"
        :max="10000"
        :step="100"
        :value="$budget"
        :showValue="true"
        wire:model.live.debounce.300ms="budget"
    />

    <x-aura::slider
        label="Distance (km)"
        name="distance_range"
        :min="0"
        :max="200"
        :step="5"
        :value="$distanceRange"
        :range="true"
        :showValue="true"
        wire:model.live.debounce.300ms="distanceRange"
    />

    <p class="text-sm text-gray-500">
        Showing results within {{ $distanceRange[0] }}-{{ $distanceRange[1] }} km,
        budget up to EUR {{ number_format($budget) }}.
    </p>
</div>

// Livewire component
class PropertyFilter extends Component
{
    public int $budget = 5000;
    public array $distanceRange = [0, 50];

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

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

Slots

Slot Description
default Not used. The slider UI is generated from props.

Live Demo

Price Range Filter

$ — $
$0 $500
0 100
75%
0 100

Volume: 50%

Accessibility

  • The slider uses role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow.
  • aria-label is set from the label prop for screen reader identification.
  • In range mode, each handle has a distinct aria-label ("Minimum value" and "Maximum value").
  • Arrow Left/Down decreases the value by one step.
  • Arrow Right/Up increases the value by one step.
  • Home sets the value to the minimum.
  • End sets the value to the maximum.
  • Page Up/Down moves the value by a larger increment (10 steps).
  • The current value is visually displayed and also announced to screen readers via aria-valuetext.
  • Focus is clearly indicated with a visible ring on the active handle.