Filament Slider

This component allows users to easily select a value or range of values by dragging a slider handle. It's ideal for settings where precise input is required, such as adjusting numerical values, controlling volume, or setting dates.

Installation

You can install the package via composer:

composer require rupadana/filament-slider

Usage

Simple Input Slider

InputSliderGroup::make()
->sliders([
    InputSlider::make('min')
])
->label('Limit')

Multiple Input

InputSliderGroup::make()
->sliders([
    InputSlider::make('min')
    InputSlider::make('max')
])
->label('Limit')

Connect

InputSliderGroup::make()
->sliders([
    InputSlider::make('min')
    InputSlider::make('max')
])
->connect([
    false,
    true,
    false
])
->label('Limit')

Maximum & Minimum

InputSliderGroup::make()
->sliders([
    InputSlider::make('min')
    InputSlider::make('max')
])
->connect([
    false,
    true,
    false
])
->max(100)
->min(0)
->label('Limit')

Complete

InputSliderGroup::make()
    ->sliders([
        InputSlider::make('min'),
        InputSlider::make('max')->default(50),
    ])
    ->connect([
        true,
        false,
        true
    ]) // array length must be sliders length + 1
    ->range([
        "min" => 30,
        "max" => 100
    ])
    ->step(10)
    ->behaviour([
        InputSliderBehaviour::DRAG,
        InputSliderBehaviour::TAP
    ])
    ->enableTooltips()
    ->label("Limit")

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Credits

• Rupadana
• All Contributors

License

The MIT License (MIT). Please see License File for more information.