Range

Preview

Component

//form component fields() method
Range::make('Range')
    ->colspan(6)
    ->default(3)//set a default value if none exists on the model
    ->min(1)
    ->max('100')
    ->step(1)
    ->rules('required|integer')
    
// The example will output
<input type="range" step="1" min="1" max="100" value="3" />

Headless

// Livewire component
public null|string|int $range = 12;

//blade view
<x-tall-range :field="Range::blade('range')
    ->colspan(6)
    ->default(3)
    ->min(1)
    ->max('100')
    ->step(1)
    ->wire('defer')"
/>

Styling

Search for /* Range */ in the theme file

These methods apply the equivalent input attribute on the field.

->step(float $step)

->min(float $min)

->max(float $max)