TrackSlider

Minimalist track-based range slider with optional live value output.

← Back to Table of Contents

Summary

Minimalist track-based range slider where the entire bar acts as the interactive surface. Features a clean, handle-less design with optional live value output and track labels. Often used for percentage inputs or subtle settings.

Class	Bjanczak\FilamentFlexFields\Filament\Forms\Components\TrackSlider
State type	int|float
Model cast	'volume' => 'integer' or 'float'
FieldType	range_slider (optional suffix / show_output in config; Flex Forms studio label: Slider)
Playground	track-slider slug in Flex Fields playground

---

Basic usage

Standard Percentage

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\TrackSlider;

TrackSlider::make('progress')
    ->label('Progress')
    ->min(0)
    ->max(100)
    ->suffix('%');

Settings Control

TrackSlider::make('font_size')
    ->trackLabel('Font Size')
    ->min(0.5)
    ->max(2)
    ->step(0.1)
    ->integer(false)
    ->decimalPlaces(1);

---

State & validation

Stored value

State is a numeric value (int or float).

$record->progress; // 75

Validation rules

The field validates the numeric type and the configured min() and max() on the server. With integer() enabled, fractional submissions fail validation. Malformed values, arrays, booleans and nonfinite numbers are rejected rather than silently converted into valid values. Add application rules with rules() and use required() when a value must be supplied.

TrackSlider::make('capacity')
    ->min(1)
    ->max(10)
    ->required();

step() controls pointer and keyboard increments; it does not add a server-side multiple-of-step rule. Add such a rule if your application requires it. Bounds must be finite and ordered, and the step must be positive. Equal bounds create a fixed-value field.

Interaction

Click or drag anywhere on the track. Arrow keys change the value by one step; Home and End select the exact bounds. The marker stays slightly inside both edges, while the fill still represents the full 0–100% range. Disabled fields ignore pointer and keyboard changes.

The three sizes share a subtle gray track and darker fill without a shadow. secondary provides a stronger fill contrast. Both variants support dark mode and reduced motion.

---

Configuration API

All methods accept Closure unless noted.

Method	Type	Default	Description
min(int|float $min)	Setup	0	Lower bound
max(int|float $max)	Setup	100	Upper bound
step(int|float $step)	Setup	1	Increment step
integer(bool $condition)	Setup	true	Snap to whole numbers
showOutput(bool $condition)	Setup	true	Display current value inside track
suffix(string $suffix)	Setup	null	Value suffix (e.g. %)
variant(string $variant)	Setup	'default'	default, secondary
decimalPlaces(int $places)	Setup	null	Fixed decimal precision
trackLabel(string $label)	Setup	null	Label shown inside the track
size(string $size)	Setup	'md'	sm, md, lg

---

Real-world examples

Volume Control

TrackSlider::make('volume')
    ->trackLabel('Volume')
    ->min(0)
    ->max(100)
    ->variant('secondary')
    ->size('lg');

Fine-tuned Spacing

TrackSlider::make('spacing')
    ->min(0)
    ->max(1)
    ->step(0.01)
    ->integer(false)
    ->decimalPlaces(2)
    ->showOutput(false);

---

Playground

/admin/flex-fields/track-slider

See Playground for setup.

---

Related components

Component	When to use instead
FlexSlider	Traditional slider with draggable handles
NumberStepper	Numeric input with increment/decrement buttons
ProgressBar	Read-only visual progress indicator

---

CSS classes (reference)

Class	Role
fff-track-slider	Root wrapper
fff-track-slider--{sm|md|lg}	Size variant
fff-track-slider--{variant}	Visual variant
fff-track-slider__track	Main interactive bar
fff-track-slider__fill	Active range indicator
fff-track-slider__thumb	Subtle indicator (visible on hover/drag)
fff-track-slider__track-label	Label inside the track
fff-track-slider__output	Value output inside the track
is-disabled	Disabled state
is-dragging	Active drag state