├── .gitignore
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── composer.json
├── config
    └── filament-slider-input-field.php
├── resources
    └── views
    │   ├── .gitkeep
    │   └── forms
    │       └── components
    │           └── slider-input.blade.php
└── src
    ├── Facades
        └── FilamentSliderInputField.php
    ├── FilamentSliderInputField.php
    ├── FilamentSliderInputFieldServiceProvider.php
    └── Forms
        └── Components
            └── SliderInput.php


/.gitignore:
--------------------------------------------------------------------------------
 1 | .idea
 2 | .phpunit.result.cache
 3 | build
 4 | composer.lock
 5 | coverage
 6 | docs
 7 | phpunit.xml
 8 | phpstan.neon
 9 | testbench.yaml
10 | vendor
11 | node_modules


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | 
 3 | All notable changes to `filament-slider-input-field` will be documented in this file.
 4 | 
 5 | ## v0.0.6
 6 | - Upgraded for compatibility with Filament v3.
 7 | 
 8 | ## v0.0.5
 9 | - Laravel 10 Compatibility Added in this release
10 | 
11 | ## v0.0.4
12 | - Reducing Slider Z-Index to avoid overlapping on Date Picker
13 | 
14 | ## v0.0.3
15 | - This release fixes Issue #1
16 | 
17 | ## v0.0.2
18 | - Fixing livewire-range-slider scripts loading
19 | 
20 | ## v0.0.1
21 | - Initial release


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) NetTantra Technologies <devadatta+php@nettantra.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Slider Input Field for Filament Forms
 2 | 
 3 | This is a wrapper around [noUiSlider](https://refreshless.com/nouislider/) which allows creating a slider field on Filament Forms.
 4 | 
 5 | [![Latest Version on Packagist](https://img.shields.io/packagist/v/nettantra/filament-slider-input-field.svg?style=flat-square)](https://packagist.org/packages/nettantra/filament-slider-input-field)
 6 | [![Total Downloads](https://img.shields.io/packagist/dt/nettantra/filament-slider-input-field.svg?style=flat-square)](https://packagist.org/packages/nettantra/filament-slider-input-field)
 7 | 
 8 | ## Installation
 9 | 
10 | You can install the package via composer:
11 | 
12 | ```bash
13 | composer require nettantra/filament-slider-input-field
14 | ```
15 | 
16 | ## Usage
17 | 
18 | ```php
19 | use NetTantra\FilamentSliderInputField\Forms\Components\SliderInput;
20 | 
21 | // admin panel
22 |     public static function form(Form $form): Form
23 |     {
24 |         return $form->schema([
25 |                     ...
26 |                     SliderInput::make('rating')
27 |                                 ->minValue(0)
28 |                                 ->maxValue(5)
29 |                                 ->step(0.05);
30 |                 ]);
31 |      }
32 | 
33 | //frontend-forms 
34 |     protected function getFormSchema(): array
35 |     {
36 |         return [
37 |             ....
38 |              SliderInput::make('rating')
39 |                         ->minValue(0)
40 |                         ->maxValue(5)
41 |                         ->step(0.05);
42 |         ];
43 |     }
44 | ```
45 | 
46 | ## Changelog
47 | 
48 | Please see [CHANGELOG](CHANGELOG.md) for more information on latest changes.
49 | 
50 | ## Security Vulnerabilities
51 | 
52 | Please report any security vulnerabilities by raising an issue [here](https://github.com/nettantra/filament-slider-input-field/issues/new)
53 | 
54 | ## Credits
55 | 
56 | - [NetTantra Technologies](https://github.com/nettantra)
57 | 
58 | ## License
59 | 
60 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
61 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "nettantra/filament-slider-input-field",
 3 |     "description": "This is a wrapper around noUiSlider which allows creating a slider field on Filament Forms.",
 4 |     "require": {
 5 |         "php": "^8.0|^8.1",
 6 |         "filament/forms": "^3.0-stable",
 7 |         "illuminate/contracts": "^9.0|^10.0",
 8 |         "jantinnerezo/livewire-range-slider": "^1.0",
 9 |         "spatie/laravel-package-tools": "^1.13.0"
10 |     },
11 |     "require-dev": {
12 |         "laravel/pint": "^1.0",
13 |         "nunomaduro/collision": "^6.0|^7.0",
14 |         "nunomaduro/larastan": "^2.0.1",
15 |         "orchestra/testbench": "^7.0|^8.0",
16 |         "pestphp/pest": "^1.21|^2.0",
17 |         "pestphp/pest-plugin-laravel": "^1.1|^2.0",
18 |         "phpstan/extension-installer": "^1.1",
19 |         "phpstan/phpstan-deprecation-rules": "^1.0",
20 |         "phpstan/phpstan-phpunit": "^1.0",
21 |         "phpunit/phpunit": "^9.5|^10.0"
22 |     },
23 |     "license": "MIT",
24 |     "autoload": {
25 |         "psr-4": {
26 |             "NetTantra\\FilamentSliderInputField\\": "src/"
27 |         }
28 |     },
29 |     "scripts": {
30 |         "post-autoload-dump": "@php package:discover --ansi",
31 |         "analyse": "vendor/bin/phpstan analyse",
32 |         "test": "vendor/bin/pest",
33 |         "test-coverage": "vendor/bin/pest --coverage",
34 |         "format": "vendor/bin/pint"
35 |     },
36 |     "authors": [
37 |         {
38 |             "name": "Devadatta Sahoo",
39 |             "email": "webmaster@nettantra.com"
40 |         }
41 |     ],
42 |     "config": {
43 |         "sort-packages": true,
44 |         "allow-plugins": {
45 |             "pestphp/pest-plugin": true,
46 |             "phpstan/extension-installer": true
47 |         }
48 |     },
49 |     "extra": {
50 |         "laravel": {
51 |             "providers": [
52 |                 "NetTantra\\FilamentSliderInputField\\FilamentSliderInputFieldServiceProvider"
53 |             ],
54 |             "aliases": {
55 |                 "FilamentSliderInputField": "NetTantra\\FilamentSliderInputField\\Facades\\FilamentSliderInputField"
56 |             }
57 |         }
58 |     },
59 |     "minimum-stability": "dev",
60 |     "prefer-stable": true
61 | }
62 | 


--------------------------------------------------------------------------------
/config/filament-slider-input-field.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | // config for NetTantra/FilamentSliderInputField
4 | return [
5 |   'default_min_value' => 0,
6 |   'default_max_value' => 10,
7 |   'show_tooltips' => true
8 | ];
9 | 


--------------------------------------------------------------------------------
/resources/views/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nettantra/filament-slider-input-field/a834645009df35e0ab45dd628c6a948ffed319d9/resources/views/.gitkeep


--------------------------------------------------------------------------------
/resources/views/forms/components/slider-input.blade.php:
--------------------------------------------------------------------------------
  1 | @once
  2 | <x-livewire-range-slider::scripts />
  3 | @endonce
  4 | 
  5 | @php
  6 | $datalistOptions = $getDatalistOptions();
  7 | $extraAlpineAttributes = $getExtraAlpineAttributes();
  8 | $id = $getId();
  9 | $isConcealed = $isConcealed();
 10 | $isDisabled = $isDisabled();
 11 | $isPrefixInline = $isPrefixInline();
 12 | $isSuffixInline = $isSuffixInline();
 13 | $mask = $getMask();
 14 | $prefixActions = $getPrefixActions();
 15 | $prefixIcon = $getPrefixIcon();
 16 | $prefixLabel = $getPrefixLabel();
 17 | $suffixActions = $getSuffixActions();
 18 | $suffixIcon = $getSuffixIcon();
 19 | $suffixLabel = $getSuffixLabel();
 20 | $statePath = $getStatePath();
 21 | 
 22 | $min = floatval($getMinValue());
 23 | $max = floatval($getMaxValue());
 24 | $twenty_percent = (($min+$max)*20)/100;
 25 | $forty_percent = (($min+$max)*40)/100;
 26 | $sixty_percent = (($min+$max)*60)/100;
 27 | $eighty_percent = (($min+$max)*80)/100;
 28 | 
 29 | $range_slider_options = [
 30 | 'start' => $getState(),
 31 | 'range' => [
 32 | 'min' => $min,
 33 | '20%' => $twenty_percent,
 34 | '40%' => $forty_percent,
 35 | '60%' => $sixty_percent,
 36 | '80%' => $eighty_percent,
 37 | 'max' => $max
 38 | ],
 39 | 'connect' => [true, false],
 40 | 'behaviour' => 'tap-drag',
 41 | 'tooltips' => $getShowTooltips(),
 42 | 'step' => floatval($getStep()),
 43 | 'pips' => [
 44 | 'mode' => 'range',
 45 | 'stepped' => true,
 46 | 'density' => 1
 47 | ]
 48 | ];
 49 | 
 50 | $field_id = str_replace('.', '-', $getId());
 51 | @endphp
 52 | 
 53 | <x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
 54 |     <x-filament::input.wrapper :disabled="$isDisabled" :inline-prefix="$isPrefixInline" :inline-suffix="$isSuffixInline" :prefix="$prefixLabel" :prefix-actions="$prefixActions" :prefix-icon="$prefixIcon" :suffix="$suffixLabel" :suffix-actions="$suffixActions" :suffix-icon="$suffixIcon" :valid="! $errors->has($statePath)" class="fi-fo-text-input" :attributes="
 55 |             \Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())
 56 |                 ->class(['overflow-hidden'])
 57 |         ">
 58 |         <div class="flex-1 relative">
 59 |             <div class="filament-slider-input py-12 px-4 rounded border relative z-10" >
 60 |                 <x-range-slider id="{{ $field_id }}" :options="$range_slider_options" :disabled="$isDisabled" wire:model.defer="{{ $getStatePath() }}" wire:key="oa-slider-{{ $field_id }}" />
 61 |                 @if ($isDisabled)
 62 |                 <div class="filament-slider-input-disable-block-ui absolute w-full h-full inset-0 z-10 cursor-not-allowed"></div>
 63 |                 @endif
 64 |             </div>
 65 | 
 66 |             <div style="opacity: 0;" class="absolute inset-0 z-0">
 67 |                 <x-filament::input :attributes="
 68 |                 \Filament\Support\prepare_inherited_attributes($getExtraInputAttributeBag())
 69 |                     ->merge($extraAlpineAttributes, escape: false)
 70 |                     ->merge([
 71 |                         'autocapitalize' => $getAutocapitalize(),
 72 |                         'autocomplete' => $getAutocomplete(),
 73 |                         'autofocus' => $isAutofocused(),
 74 |                         'disabled' => $isDisabled,
 75 |                         'id' => $id,
 76 |                         'inlinePrefix' => $isPrefixInline && (count($prefixActions) || $prefixIcon || filled($prefixLabel)),
 77 |                         'inlineSuffix' => $isSuffixInline && (count($suffixActions) || $suffixIcon || filled($suffixLabel)),
 78 |                         'inputmode' => $getInputMode(),
 79 |                         'list' => $datalistOptions ? $id . '-list' : null,
 80 |                         'max' => (! $isConcealed) ? $getMaxValue() : null,
 81 |                         'maxlength' => (! $isConcealed) ? $getMaxLength() : null,
 82 |                         'min' => (! $isConcealed) ? $getMinValue() : null,
 83 |                         'minlength' => (! $isConcealed) ? $getMinLength() : null,
 84 |                         'placeholder' => $getPlaceholder(),
 85 |                         'readonly' => $isReadOnly(),
 86 |                         'required' => $isRequired() && (! $isConcealed),
 87 |                         'step' => $getStep(),
 88 |                         'type' => blank($mask) ? $getType() : 'text',
 89 |                         $applyStateBindingModifiers('wire:model') => $statePath,
 90 |                         'x-data' => (count($extraAlpineAttributes) || filled($mask)) ? '{}' : null,
 91 |                         'x-mask' . ($mask instanceof \Filament\Support\RawJs ? ':dynamic' : '') => filled($mask) ? $mask : null,
 92 |                     ], escape: false)
 93 |             " />
 94 |             </div>
 95 |         </div>
 96 | 
 97 |     </x-filament::input.wrapper>
 98 | 
 99 |     @if ($datalistOptions)
100 |     <datalist id="{{ $id }}-list">
101 |         @foreach ($datalistOptions as $option)
102 |         <option value="{{ $option }}" />
103 |         @endforeach
104 |     </datalist>
105 |     @endif
106 | </x-dynamic-component>


--------------------------------------------------------------------------------
/src/Facades/FilamentSliderInputField.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace NetTantra\FilamentSliderInputField\Facades;
 4 | 
 5 | use Illuminate\Support\Facades\Facade;
 6 | 
 7 | /**
 8 |  * @see \NetTantra\FilamentSliderInputField\FilamentSliderInputField
 9 |  */
10 | class FilamentSliderInputField extends Facade
11 | {
12 |     protected static function getFacadeAccessor()
13 |     {
14 |         return \NetTantra\FilamentSliderInputField\FilamentSliderInputField::class;
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/FilamentSliderInputField.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | namespace NetTantra\FilamentSliderInputField;
4 | 
5 | class FilamentSliderInputField
6 | {
7 | }
8 | 


--------------------------------------------------------------------------------
/src/FilamentSliderInputFieldServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace NetTantra\FilamentSliderInputField;
 4 | 
 5 | use Spatie\LaravelPackageTools\Package;
 6 | use Spatie\LaravelPackageTools\PackageServiceProvider;
 7 | use NetTantra\FilamentSliderInputField\Commands\FilamentSliderInputFieldCommand;
 8 | 
 9 | class FilamentSliderInputFieldServiceProvider extends PackageServiceProvider
10 | {
11 |     public function configurePackage(Package $package): void
12 |     {
13 |         $package
14 |             ->name('filament-slider-input-field')
15 |             ->hasConfigFile()
16 |             ->hasViews();
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/Forms/Components/SliderInput.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace NetTantra\FilamentSliderInputField\Forms\Components;
 4 | 
 5 | use Filament\Forms\Components\TextInput;
 6 | 
 7 | class SliderInput extends TextInput
 8 | {
 9 |     protected string $view = 'filament-slider-input-field::forms.components.slider-input';
10 | 
11 |     protected $minValue = null;
12 | 
13 |     protected $maxValue = null;
14 | 
15 |     protected $showTooltips = true;
16 | 
17 |     public function showTooltips($showTooltips): static
18 |     {
19 |         $this->showTooltips = $showTooltips;
20 | 
21 |         return $this;
22 |     }
23 | 
24 |     public function getShowTooltips(): bool
25 |     {
26 |         return $this->showTooltips;
27 |     }
28 | 
29 |     protected function setUp(): void
30 |     {
31 |         parent::setUp();
32 |         $this->minValue = config('filament-slider-input-field.default_min_value', 0);
33 |         $this->maxValue = config('filament-slider-input-field.default_max_value', 10);
34 |         $this->showTooltips = config('filament-slider-input-field.show_tooltips', true);
35 |     }
36 | 
37 |     public function getConfigurations(): array
38 |     {
39 |         return [
40 |             'minValue' => $this->minValue,
41 |             'maxValue' => $this->maxValue,
42 |             'showTooltips' => $this->showTooltips,
43 |         ];
44 |     }
45 | 
46 | }
47 | 


--------------------------------------------------------------------------------