Range Slider

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

@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"
/>

<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 />