Skip to content

yepsua/filament-range-field

Folders and files

NameName
Last commit message
Last commit date

Latest commit

fc29d84 Â· Dec 29, 2023

History

40 Commits
Jul 4, 2022
May 17, 2022
Dec 29, 2023
Dec 29, 2023
May 17, 2022
May 17, 2022
May 17, 2022
May 17, 2022
May 17, 2022
Jul 15, 2022
May 17, 2022
Dec 29, 2023
Sep 13, 2023
May 17, 2022
May 17, 2022
May 17, 2022

Repository files navigation

The missing range field for the Filament forms.

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

Installation

You can install the package via composer:

composer require yepsua/filament-range-field

Publish the assets:

php artisan filament:assets

You must see something like in the console:

php artisan filament:assets

...
public/css/yepsua/filament-range-field/range-input-component.css 
...

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-range-field-views"

Basic usage

By default the range is used to get value from 0 to 100.

use Yepsua\Filament\Forms\Components\RangeSlider

...
    protected function getFormSchema(): array
    {
        return [
            ...
            RangeSlider::make('range')
            ...
        ];
    }
...

Defining the steps:

use Yepsua\Filament\Forms\Components\RangeSlider

...
    protected function getFormSchema(): array
    {
        return [
            ...
            RangeSlider::make('range')->steps([
                'A', // should get value: 1 for the A
                'B', // should get value: 2 for the B
                'C', // should get value: 3 for the C
                'D'  // should get value: 4 for the D
            ])
            ...
        ];
    }
...

Associative Array:

use Yepsua\Filament\Forms\Components\RangeSlider

...
    protected function getFormSchema(): array
    {
        return [
            ...
            RangeSlider::make('range')->steps([
                '25'  => 'A', // should get value: 25  for the A
                '50'  => 'B', // should get value: 50  for the B
                '75'  => 'C', // should get value: 75  for the C
                '100' => 'D'  // should get value: 100 for the D
            ])
            ...
        ];
    }
...

Hide the Step List:

use Yepsua\Filament\Forms\Components\RangeSlider

...
    protected function getFormSchema(): array
    {
        return [
            ...
            RangeSlider::make('range')->steps([
                'A',
                'B',
                'C',
                'D'
            ])->displaySteps(false)
            ...
        ];
    }
...

📕 Note: The step value is defined by the first item in the steps array, Ex. => [25, 50, 75, 100] the step value should be 25. However if you need to define any other step value you can use the setter step.

    RangeSlider::make('range')->steps([
        0 => '0',
        25 => '25',
        50 => '50',
        75 => '75',
        100 => '100'
    ])->step(25)
    ...

The same case applies for the min and max setters:

    RangeSlider::make('range')->min(25)->max(75)->step(5)

Testing

composer test

Changelog

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

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

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