Form Components

Range Slider

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

# Basic usage

Level *

@php
    // #[Validate('required|gt:0')]
    // public int $level = 25;
@endphp
 
<x-range wire:model="level" label="Level *" />

# Range limit and Step

Selected level: 30

Selected step: 250

Level *

Select level between 0 and 100

Step

Increment by 50

@php
    // #[Validate('required|gt:20')]
    // public int $level2 = 30;
 
    // #[Validate('required|gt:200')]
    // public int $level3 = 250;
@endphp
 
<x-range
    wire:model.live="level2"
    min="0"
    max="100"
    label="Level *"
    hint="Select level between 0 and 100"
/>
 
<x-range
    wire:model.live="level3"
    min="100"
    max="500"
    step="50"
    label="Step"
    hint="Increment by 50"
/>

# Color variants

Default

Black

Slate

Zinc

Gray

Neutral

Stone

Red

Orange

Amber

Yellow

Lime

Green

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

<x-range label="Default" />
<x-range label="Black" black />
<x-range label="Slate" slate />
<x-range label="Zinc" zinc />
<x-range label="Gray" gray />
<x-range label="Neutral" neutral />
<x-range label="Stone" stone />
<x-range label="Red" red />
<x-range label="Orange" orange />
<x-range label="Amber" amber />
<x-range label="Yellow" yellow />
<x-range label="Lime" lime />
<x-range label="Green" green />
<x-range label="Emerald" emerald />
<x-range label="Teal" teal />
<x-range label="Cyan" cyan />
<x-range label="Sky" sky />
<x-range label="Blue" blue />
<x-range label="Indigo" Indigo />
<x-range label="Violet" violet />
<x-range label="Purple" purple />
<x-range label="Fuchsia" fuchsia />
<x-range label="Pink" pink />
<x-range label="Rose" rose />