Laravel Inertia Forms

Appearance

Fields

Slider ​

Erag\InertiaForms\Fields\Slider renders a range input (type="range") with the current value shown next to it.

When to use: volume, percentages, ratings on a scale, budgets where an exact number isn't critical.

Examples ​

Each example is a live form built from the PHP below it. Fill it in and press submit to see the data your controller would receive.

Basic ​

A 0 to 100 slider that starts at 40. The current value is shown next to it.

php
use Erag\InertiaForms\Fields\Slider;

Slider::make('volume')->default(40);

Steps and units ​

step() sets the gap between values, including decimals, and suffix() adds a unit to the shown value.

php
use Erag\InertiaForms\Fields\Slider;

[
    Slider::make('discount')->max(50)->step(5)->suffix('%')->default(10),
    Slider::make('font_size')->min(12)->max(32)->suffix('px')->default(16),
    Slider::make('opacity')->min(0)->max(1)->step(0.1)->default(0.8),
];

Advanced: project brief ​

Several sliders in a two-column fieldset. The last one hides its number with showValue(false), since only the rough position matters.

php
use Erag\InertiaForms\Fields\Fieldset;
use Erag\InertiaForms\Fields\Slider;

Fieldset::make('Project brief')
    ->description('Rough numbers are fine; we will refine them on the call.')
    ->columns(2)
    ->fields([
        Slider::make('budget')
            ->label('Budget')
            ->min(1000)
            ->max(20000)
            ->step(500)
            ->suffix(' USD')
            ->default(5000)
            ->columnSpan(2),
        Slider::make('team_size')->min(1)->max(12)->suffix(' people')->default(3),
        Slider::make('weeks')->label('Timeline')->min(2)->max(26)->suffix(' weeks')->default(8),
        Slider::make('urgency')
            ->min(1)
            ->max(5)
            ->showValue(false)
            ->help('Left: whenever it is ready. Right: as soon as possible.')
            ->columnSpan(2),
    ]);

Methods ​

All common field methods are available, plus:

min(int|float $min) ​

The lowest value. Default 0. Also used as the empty value.

php
Slider::make('rating')->min(1)->max(10);

max(int|float $max) ​

The highest value. Default 100.

php
Slider::make('discount')->max(50);

step(int|float $step) ​

The distance between values. Default 1.

php
Slider::make('opacity')->min(0)->max(1)->step(0.1);

showValue(bool $show = true) ​

Show the current value next to the slider. On by default; pass false to hide it.

php
Slider::make('mood')->showValue(false);

suffix(?string $suffix) ​

A unit shown after the displayed value, like % or px.

php
Slider::make('font_size')->min(12)->max(32)->suffix('px');

Validation rules ​

ConfigurationRules
alwaysnumeric, min:<min>, max:<max>
php
Slider::make('volume')->min(0)->max(100);
// ['nullable', 'numeric', 'min:0', 'max:100']

step() is not validated on the server.

Value ​

  • A number.
  • Empty value: the min() value, so a slider always has a value.

Standalone use ​

vue
<Slider v-model="volume" :field="volumeField" id="volume" :disabled="false" />
tsx
<Slider field={volumeField} id="volume" value={volume} disabled={false} onChange={setVolume} />
svelte
<Slider field={volumeField} id="volume" bind:value={volume} disabled={false} />

See Standalone Components.