new
Livewire Volt extension for VSCode. Voltage →
maryUI

Range Slider

Range slider is used to select a value by sliding a handle.

The following examples uses `.live` to make sure you see the changes.

Basic

Greater than 10.
Selected: 0 
@php                        
    $level = $this->level;  
@endphp                     
<x-range wire:model.live.debounce="level" label="Select a level" hint="Greater than 10." />
<hr class="my-5" /> 
<x-badge value="Selected: {{ $level }}" class="badge-neutral" /> 
#[Rule('required|gt:10')]
public int $level = 10;

Step & Range

You can also set the range limits with min and max attributes. Use the step attribute to control the increased value when sliding.

Greater than 30.
Selected: 30 
@php                          
    $level2 = $this->level2;  
@endphp                       
<x-range
    wire:model.live.debounce="level2"
    min="20"
    max="80"
    step="10"
    label="Select a level"
    hint="Greater than 30."
    class="range-accent" />
<hr class="my-5" /> 
<x-badge value="Selected: {{ $level2 }}" class="badge-accent" /> 
#[Rule('required|gt:30')]
public int $level2 = 30;
maryUI
Sponsor