- How do I install jantinnerezo/livewire-range-slider in a Laravel app?
- Install it with Composer using composer require jantinnerezo/livewire-range-slider, then drop the package's Blade tag directly into a form inside a Livewire component view. Because it is a Livewire component rather than a full frontend plugin, there is no npm install, asset compilation, or extra JavaScript entry point to register. Check the README for the exact tag name and any published config or view options before first use, and confirm the package is publicly resolvable on Packagist from your network.
- Does livewire-range-slider support Livewire 3 and Laravel 11?
- That is not clearly established. Release 1.0.1 exists, but its notes contain no changelog or compatibility statement, so Livewire 3 support cannot be assumed from the version number alone. Inspect the composer.json constraints and the actual diff behind PR #7, then test a minimal slider in a Livewire 3 sandbox before committing to it. Treat Livewire 2 as the safer assumption until compatibility is proven in your own environment.
- How do I bind a range slider to a Livewire property with wire:model?
- You bind the slider the same way as any other Livewire input, using wire:model on the component tag or a supported attribute it exposes. The bound property must match the shape the component expects: a scalar for single-handle mode and a pair such as [min, max] for dual-handle mode. Decide up front whether you need wire:model, wire:model.live, or wire:model.defer, and test each in your app because array binding and deferred updates behave differently. Also confirm how the component handles null or empty initial values so validation rules do not fail unexpectedly.
- Can the slider handle dual-handle minimum and maximum selection?
- Yes, dual-handle mode is one of the advertised features, which makes it useful for price, age, or date range filters in admin panels. The important detail is the bound property shape: plan on an array with two values and validate that the first is never greater than the second. Since a dual-handle control is more complex than a single input, test drag collisions, equal min and max values, and formatted display strings before relying on it.
- How do I set min, max, step, and custom value formatting?
- The component accepts configurable min, max, and step values along with value formatting options passed through the Blade tag or component attributes. Formatting is typically used for currency prefixes, suffixes, or unit labels shown in a tooltip, while the underlying bound value stays numeric. Keep formatting display-only and send raw numbers to your Livewire component so validation and database writes stay predictable. Verify behavior with extreme step values and very large or very small ranges, since those are common sources of rounding bugs.
- Does the package require JavaScript or Alpine.js, and will it break my CSP?
- The package markets itself as requiring no external JavaScript dependencies, but that usually means no third-party slider plugin, not that no JavaScript runs at all. A dual-handle slider almost certainly ships custom scripts or inline initialization, which can conflict with a strict Content-Security-Policy that blocks inline scripts. If you use nonce-based or hash-based CSP, inspect the rendered markup and confirm how the script is injected. Test in your real headers rather than assuming the no-build-tooling claim covers CSP safety.
- Is livewire-range-slider safe to use in checkout or pricing forms?
- It should not be treated as a core or revenue-critical dependency. The project has low community adoption, an unverified Livewire 3 status, and unclear maintenance cadence after the 1.0.1 patch release. It fits internal admin filters, settings panels, dashboards, and prototypes where a regression is a minor inconvenience. For checkout, pricing, or regulated workflows, use a maintained alternative or build a small internal component you control.
- How do I write Livewire tests for a range slider component?
- Test the Livewire property rather than the browser widget: set the value with Livewire::test, assert the bound property, and verify your validation rules on the array or scalar shape. Add a validation test for min greater than max in dual-handle mode, and one for null or empty initial state. Browser-level drag and keyboard behavior needs a tool like Dusk, Pest browser testing, or Playwright if you want real coverage. Keep the vendor tag wrapped in your own Blade partial so tests target your component, not the package directly.
- Is the range slider accessible and usable on mobile and touch devices?
- Accessibility is the biggest open question for a dual-handle slider, since two thumbs require careful ARIA roles, focus order, and keyboard handling. Native range inputs get much of this for free; custom implementations often do not. Before shipping, test with a screen reader, tab through both handles, confirm arrow-key increments respect your step value, and check touch dragging on real phones. Also verify right-to-left layout if your application supports RTL locales.
- What are the alternatives if livewire-range-slider is unmaintained?
- First check Packagist for an abandoned flag and look at issue and pull request activity after release 1.0.1, including what PR #7 actually changed. Because the package is MIT licensed, you can fork it if the repository is publicly available and the source is reviewable. A common fallback is a small project-owned Livewire component built on native range inputs or Alpine, which avoids vendor risk for such a narrow UI concern. Either way, wrap third-party sliders behind your own partial so swapping them later touches one file instead of every form.