Skip to main content
The Slider component requires a Flux Pro license. Learn more about Flux Pro.

​
Overview

The Slider component provides an intuitive interface for selecting numeric values or ranges. Perfect for filters, settings, and any scenario where users need to choose values along a continuous spectrum.

​
Basic Usage

Create a simple slider: 
<flux:slider
    wire:model="volume"
    :min="0"
    :max="100"
    label="Volume"
/>

​
With Steps

Define specific increments: 
<flux:slider
    wire:model="rating"
    :min="0"
    :max="5"
    :step="0.5"
    label="Rating"
/>

​
Range Slider

Select a range with two handles: 
<flux:slider
    wire:model="priceRange"
    :min="0"
    :max="1000"
    range
    label="Price Range"
/>

class ProductFilter extends Component
{
    public $priceRange = [0, 500];
}

​
Show Value

Display the current value: 
<flux:slider
    wire:model="brightness"
    :min="0"
    :max="100"
    show-value
    label="Brightness"
/>

​
Custom Format

Format the displayed value: 
<flux:slider
    wire:model="distance"
    :min="0"
    :max="100"
    show-value
    :format="fn($value) => $value . ' km'"
    label="Distance"
/>

​
With Marks

Add visual markers: 
<flux:slider
    wire:model="priority"
    :min="1"
    :max="5"
    :marks="[
        1 => 'Low',
        3 => 'Medium',
        5 => 'High',
    ]"
    label="Priority"
/>

​
Vertical Orientation

Render a vertical slider: 
<flux:slider
    wire:model="level"
    :min="0"
    :max="100"
    orientation="vertical"
    class="h-48"
/>

​
Disabled State

Disable the slider: 
<flux:slider
    wire:model="value"
    :min="0"
    :max="100"
    disabled
    label="Read-only Value"
/>

​
With Tooltip

Show value in a tooltip while dragging: 
<flux:slider
    wire:model="percentage"
    :min="0"
    :max="100"
    tooltip="drag"
/>

​
Use Cases

Price Filters

Allow users to filter products by selecting a price range.

Volume Controls

Adjust audio volume, brightness, or other continuous settings.

Date Range

Select a range of years, months, or days for date filtering.

Ratings

Input or filter by rating values with decimal precision.

​
Features

​
Value Selection

  • Single value selection
  • Range selection with dual handles
  • Configurable min, max, and step
  • Decimal value support

​
Visual Feedback

  • Current value display
  • Tooltips on hover/drag
  • Visual markers and labels
  • Fill color for selected range

​
Interaction

  • Click to jump to value
  • Drag handles to adjust
  • Keyboard navigation (arrow keys)
  • Touch device support

​
Customization

  • Custom value formatting
  • Vertical or horizontal orientation
  • Custom colors and styling
  • Marks and labels

​
Keyboard Navigation

  • Arrow Up/Right: Increase value
  • Arrow Down/Left: Decrease value
  • Page Up: Increase by large step
  • Page Down: Decrease by large step
  • Home: Jump to minimum
  • End: Jump to maximum

​
Advanced Examples

​
Price Range Filter

<flux:slider
    wire:model.live="filters.price"
    :min="0"
    :max="5000"
    :step="50"
    range
    show-value
    :format="fn($value) => '$' . number_format($value)"
>
    <x-slot name="label">
        <div class="flex items-center justify-between">
            <span>Price Range</span>
            <span class="text-sm text-gray-500">
                ${{ number_format($filters['price'][0]) }} - ${{ number_format($filters['price'][1]) }}
            </span>
        </div>
    </x-slot>
</flux:slider>

​
Temperature Control

<flux:slider
    wire:model.live="temperature"
    :min="16"
    :max="30"
    :step="0.5"
    show-value
    :format="fn($value) => $value . '°C'"
    :marks="[
        16 => '16°',
        20 => '20°',
        24 => '24°',
        30 => '30°',
    ]"
    label="Temperature"
/>

​
Age Range Filter

<flux:slider
    wire:model.live="ageRange"
    :min="18"
    :max="100"
    range
    :marks="[
        18 => '18',
        30 => '30',
        50 => '50',
        70 => '70',
        100 => '100+',
    ]"
    label="Age Range"
/>

<p class="text-sm text-gray-600 mt-2">
    Ages {{ $ageRange[0] }} to {{ $ageRange[1] }}
</p>

​
Experience Level

<flux:slider
    wire:model="experience"
    :min="1"
    :max="5"
    :marks="[
        1 => 'Beginner',
        2 => 'Intermediate',
        3 => 'Advanced',
        4 => 'Expert',
        5 => 'Master',
    ]"
    snap-to-marks
    label="Experience Level"
/>

​
Styling

Customize slider appearance: 
<flux:slider
    wire:model="value"
    :min="0"
    :max="100"
    track-class="bg-gray-200 h-2"
    fill-class="bg-blue-500"
    thumb-class="w-4 h-4 bg-blue-600 border-2 border-white shadow-lg"
/>

​
Accessibility

The Slider component is fully accessible:
  • Proper ARIA attributes (role="slider", aria-valuemin, aria-valuemax, aria-valuenow)
  • Keyboard navigation support
  • Focus indicators
  • Screen reader announcements
  • Touch-friendly hit targets
For better UX, combine sliders with numeric inputs when precision is important, allowing users to either drag for quick adjustments or type exact values.