Range - Laravel Blade

Use the range slider input component to select a numeric value from a range of values with support for min/max limits, steps, sizes, and disabled state.

Default Range

Blade code

<div class="max-w-md">
    <x-fwb.range label="Default range" :value="50" />
</div>

Disabled State

Blade code

<div class="max-w-md">
    <x-fwb.range label="Disabled range" :value="50" :disabled="true" />
</div>

Min and Max

Blade code

<div class="max-w-md">
    <x-fwb.range label="Min and max range" :min="0" :max="10" :value="5" />
</div>

Steps

Blade code

<div class="max-w-md">
    <x-fwb.range label="Steps range" :min="0" :max="5" :step="0.5" :value="2.5" />
</div>

Sizes

Blade code

<div class="space-y-6 max-w-md">
    <x-fwb.range label="Small range" size="sm" :value="50" />
    <x-fwb.range label="Default range" size="md" :value="50" />
    <x-fwb.range label="Large range" size="lg" :value="50" />
</div>

Range with Labels

$100 $500 $1000 $1500

Blade code

<div class="max-w-md">
    <x-fwb.range label="Price range" :min="100" :max="1500" :value="500" :step="100" />
    <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 -mt-1">
        <span>$100</span>
        <span>$500</span>
        <span>$1000</span>
        <span>$1500</span>
    </div>
</div>

Component Properties

Range x-fwb.range

Prop Type Default Description
id string auto Unique identifier for the range input. Auto-generated if not provided.
label string|null null Label text displayed above the range slider.
min int|float 0 Minimum value of the range.
max int|float 100 Maximum value of the range.
step int|float 1 Step increment between values.
value int|float 50 Initial value of the range slider.
size string md Range slider size: sm, md, or lg.
disabled bool false Disable the range slider.
required bool false Mark the range slider as required.