Docs running with Livewire 4 - Beta try it →
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

Select a level
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." />

<x-hr /> 
<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.

Select a level
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-primary range-xs" />

<x-hr /> 
<x-badge value="Selected: {{ $level2 }}" class="badge-primary" /> 
#[Rule('required|gt:30')]

public int $level2 = 30;
Made with by Robson Tenório and contributors.