Forms Documentation

Appearance

Slider ​

The Slider field renders a range slider for numeric input. It supports single values, range mode with two thumbs, custom marks, units, and vertical orientation.

Basic Usage ​

This renders a slider from 0 to 100 with a step of 1. The current value is displayed beside a visible field label by default, or above the track when the label is hidden.

Example
64
php
use InertiaUI\Forms\Fields\Slider;

Slider::make('volume');

Min, Max, and Step ​

Example
450
php
Slider::make('price')
    ->min(0)
    ->max(1000)
    ->step(50);

Both min() and max() automatically add the corresponding validation rules for scalar slider submissions.

Range Mode ​

Enable range mode to use two thumbs for selecting a range. The value is stored as an array [min, max]. range() adds array, list, and size:2 validation, verifies the values are ordered, and validates each item as numeric within the configured min and max bounds.

Example
125350
php
Slider::make('price_range')
    ->range()
    ->min(0)
    ->max(500);

Minimum Steps Between Thumbs ​

Prevent the two thumbs from getting too close to each other:

Example
2570
php
Slider::make('price_range')
    ->range()
    ->min(0)
    ->max(100)
    ->step(5)
    ->minStepsBetween(2); // At least 10 apart (2 steps * 5)

This gap is enforced by the slider UI and backend validation.

Value Display ​

The current value is shown by default. You may hide it:

Example
72
php
Slider::make('brightness');

Slider::make('contrast')->hideValue();

// Explicit equivalent
Slider::make('contrast')->showValue(false);

Min/Max Labels ​

Show the min and max values at the ends of the slider:

Example
64
0100
php
Slider::make('volume')
    ->min(0)
    ->max(100)
    ->showMinMax();

Units ​

Add a unit label to the displayed value. By default, the unit appears as a suffix:

Example
22°C
$500
php
Slider::make('temperature')
    ->min(-20)
    ->max(50)
    ->unit('°C');

Use the position parameter to show it as a prefix:

php
Slider::make('budget')
    ->min(0)
    ->max(10000)
    ->step(100)
    ->unit('$', 'prefix');

You may also set the position separately:

php
Slider::make('budget')
    ->unit('EUR')
    ->unitPosition('prefix');

'suffix' (the default) renders after the value, like 50°C; 'prefix' renders before it, like $500.

Marks ​

Add labeled tick marks along the slider track:

Example
75
Poor
Fair
Good
Great
Excellent
php
Slider::make('rating')->marks([
    0 => 'Poor',
    25 => 'Fair',
    50 => 'Good',
    75 => 'Great',
    100 => 'Excellent',
]);

PHP marks() accepts either an array keyed by slider value or the same normalized array used by direct components:

php
Slider::make('rating')->marks([
    ['value' => 0, 'label' => 'Poor'],
    ['value' => 50, 'label' => 'Good'],
    ['value' => 100], // Unlabeled tick
]);

PHP normalizes keyed maps to { value, label } records and rejects non-numeric mark values. Direct Vue and React component props use the normalized array shape.

Vertical Orientation ​

Render the slider vertically. You'll typically want to set a height as well:

Example
64
php
Slider::make('volume')
    ->vertical()
    ->height(200); // pixels

Vertical orientation also supports range() and keeps both native thumbs available for keyboard interaction and form submission.

Lazy Updates ​

By default, the value updates on every input event (as the thumb moves). Use lazy() to only update when the user releases the thumb:

php
Slider::make('quality')->lazy();

This is useful when the slider value triggers expensive computations or network requests.

Jump Step ​

Keyboard users may make small or large adjustments. ArrowRight and ArrowUp add one step; ArrowLeft and ArrowDown subtract one step. Hold Shift with an arrow key to use the larger jump increment. PageUp and PageDown always use the same jump increment.

Without a custom jump value, the frontend uses step * 10. With the default step(1), Shift+Arrow and PageUp/PageDown move by 10. Pass the jump argument to step() when a different keyboard increment fits the field better:

php
Slider::make('opacity')
    ->min(0)
    ->max(100)
    ->step(1, jump: 10); // Shift+Arrow moves by 10

For direct component rendering, pass the frontend prop as jumpStep in React or jump-step in Vue templates.

Readonly ​

Slider does not currently support a readonly state because native range inputs do not expose a readonly mode. Use disabled() when users should see the value but not change it.

Budget Range Slider ​

php
Slider::make('budget')
    ->label('Monthly Budget')
    ->help('Drag to set your budget range')
    ->range()
    ->min(0)
    ->max(5000)
    ->step(100)
    ->unit('$', 'prefix')
    ->showMinMax()
    ->minStepsBetween(2)
    ->marks([
        0 => 'Free',
        2500 => 'Mid',
        5000 => 'Max',
    ])
    ->required();

Shared Field APIs ​

The slider methods above compose with shared field APIs. You may use Form Class for labels and help text, Model Binding for default(), Validation for rules and required fields, Styling for classes and presentation helpers, Conditional Visibility, and Authorization.

Using the Component Directly ​

Slider is exported from each package's components subpath. You may use it for standalone numeric input or while rendering forms manually.

vue
<script setup lang="ts">
import { Slider } from '@inertiaui/form-vue/components'
import { shallowRef } from 'vue'

const comfortRange = shallowRef<[number, number]>([18, 24])
const temperatureMarks = [
    { value: 16, label: 'Cool' },
    { value: 22, label: 'Comfort' },
    { value: 30, label: 'Warm' },
]
</script>

<template>
    <Slider
        v-model="comfortRange"
        id="comfort-range"
        name="comfort_range"
        label="Comfort range"
        help="Set the preferred room temperature."
        range
        :min="16"
        :max="30"
        :step="1"
        :jump-step="2"
        unit="°C"
        unit-position="suffix"
        :marks="temperatureMarks"
        show-value
        show-min-max
        vertical
        :height="220"
        lazy
        :min-steps-between="2"
        data-testid="comfort-range"
    />
</template>
tsx
import { useState } from 'react'
import { Slider } from '@inertiaui/form-react/components'

const temperatureMarks = [
    { value: 16, label: 'Cool' },
    { value: 22, label: 'Comfort' },
    { value: 30, label: 'Warm' },
]

export default function ComfortRangeSlider() {
    const [comfortRange, setComfortRange] = useState<[number, number]>([18, 24])

    return (
        <Slider
            value={comfortRange}
            onValueChange={setComfortRange}
            id="comfort-range"
            name="comfort_range"
            label="Comfort range"
            help="Set the preferred room temperature."
            range
            min={16}
            max={30}
            step={1}
            jumpStep={2}
            unit="°C"
            unitPosition="suffix"
            marks={temperatureMarks}
            showValue
            showMinMax
            vertical
            height={220}
            lazy
            minStepsBetween={2}
            data-testid="comfort-range"
        />
    )
}

Native attributes and listeners target the underlying native element. See Native Attributes And Events.