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