rupadana/filament-slider

Slide into Precision – Customizable Control at Your Fingertips.

1.0.1 2024-09-05 05:15 UTC

Requires

• php: ^8.1
• filament/forms: ^3.0
• illuminate/contracts: ^10.0|^11.0
• spatie/laravel-package-tools: ^1.15.0

Requires (Dev)

• laravel/pint: ^1.0
• nunomaduro/collision: ^7.9
• phpstan/extension-installer: ^1.1

MIT

• Rupadana

• laravel
• rupadana
• filament-slider

README

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.