Weave Code
Filament Slider Input Field Laravel Package
nettantra/filament-slider-input-field
Add an interactive range slider to Filament forms with this Laravel package. Configure min, max, step, and labels to give users smooth numeric input for resource forms, settings pages, and admin panels.
This is a wrapper around noUiSlider which allows creating a slider field on Filament Forms.
Frequently asked questions about Filament Slider Input Field
- How do I install the Filament slider input field with Composer?
- Run composer require nettantra/filament-slider-input-field, then register the package assets with FilamentAsset::register() or publish the vendor assets if your setup requires it. After that, use Slider::make('field_name') inside any Filament form schema. Because the package is at 0.0.6, pin the exact version and commit your composer.lock rather than using a caret constraint.
- Does this package support Filament v4?
- No v4 support is declared. Version 0.0.6 explicitly targets Filament v3, and there is no stated or implied v4 path, so treat v4 as unsupported. Check the composer.json constraint to see whether it allows ^3.0 broadly or a narrower 3.x pin before upgrading your panel.
- How do I configure min, max, step, and a default value on the slider?
- Chain the field's configuration methods in your form schema, for example Slider::make('volume')->min(0)->max(100)->step(5)->default(50). The component wraps a native range input, so min, max, and step map directly to the rendered slider. Keep the same bounds in your validation rules so the stored value cannot fall outside the intended range.
- How do I make the slider update other form fields live in Filament?
- The package advertises optional live updates and reactive form behavior, so the value can drive dependent fields as the user drags. Be aware that a slider with live syncing can generate many server round-trips through Livewire unless updates are debounced. Test the behavior on a slow connection and confirm the final value is synced before the form is saved.
- Do I still need server-side validation for a Filament slider field?
- Yes. The min, max, and step settings are UI hints only and can be bypassed by a crafted Livewire request. Add validation rules to the field, such as numeric plus minimum and maximum, and verify the value at save time. Filament's standard field validation API works because the slider is a normal form field.
- Why does the slider stop working inside a repeater, wizard step, or hidden container?
- noUiSlider is imperative JavaScript, while Filament v3 and Livewire re-render the DOM with Alpine. If the wrapper does not properly destroy and re-initialize the slider after a morph, the widget can freeze or display stale values. This is the most common break point, so test sliders inside repeaters, conditional fields, and multi-step wizards before shipping.
- Does the package support a two-handle range slider, tooltips, and value formatting?
- The documented options cover a single numeric value with configurable min, max, step, labels, tooltips, and custom formatting. Two-handle range selection is not described, so do not assume it works without checking the source. If labels or format strings come from user-controlled data in a multi-tenant admin, make sure they are escaped before being rendered.
- Is nettantra/filament-slider-input-field safe to use in production?
- It is a small, stateless field with no migrations or models, which keeps the risk surface low. The maintenance risk is real: pre-1.0 versioning, a single maintaining organization, and a small install base mean you should pin the exact version and commit the lockfile. For critical admin panels, consider vendoring the field class so you can patch it yourself.
- How do I test a Filament form that uses the slider field?
- The slider behaves like any other Livewire-backed Filament field, so test it with Livewire::test on the form component and fillForm(['field' => 50]). Assert that the value is saved and that validation rejects out-of-range input. Browser-level checks are still useful for the JavaScript behavior inside repeaters or wizards, since PHP tests do not exercise the noUiSlider glue.
- What are the alternatives to using this package for range sliders in Filament?
- You can wrap noUiSlider yourself with a small Alpine component inside a Filament field, which gives you full control over destroy and re-initialize behavior. For simple bounded integers, a native numeric input or Filament's built-in text input with validation is often enough. Choose this package when you want the slider UI with minimal setup and accept the maintenance trade-offs of a pre-1.0 dependency.
Weaver
How can I help you explore Laravel packages today?