Download the PHP package ysz/lw-range-slider without Composer
On this page you can find all versions of the php package ysz/lw-range-slider. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download ysz/lw-range-slider
More information about ysz/lw-range-slider
Files in ysz/lw-range-slider
Package lw-range-slider
Short Description A simple noUiSlider blade component designed specifically for your Livewire Components.
License MIT
Informations about the package lw-range-slider
Livewire Range Slider
Inspired by https://github.com/jantinnerezo/livewire-range-slider, Please check it out!
An effortless blade component, noUiSlider, tailored for your Livewire Components.
Installation
You can install the package via composer:
Register the script component to template after the @livewireScripts
Requirements
This package is designed to be used in conjunction with Livewire components. Please ensure that you exclusively utilize it within Livewire projects.
-
PHP 8.1 or higher
-
Laravel 10.x or higher
- (included) noUiSlider
How to use it!
Please add this properties inside your existing Livewire component.
The $options
property represents the noUiSlider options that you provide to the component. For additional details and configurations, please refer to noUiSlider
The $sliderValues
property is the model for the range slider values.
Livewire's default wire:model
attribute
Deferred Updating
In cases where you don't need data updates to happen live, you can remove all modifiers to batch data updates with the next network request.
Lazy Updating
You can also use .blur
modifier to update the data after the user has finished interacting with the slider.
Emitting events
To update the start
or range
values for noUiSlider, call the firePriceRangeChangedEvent
method.
this will immediately update the range
and start
values for noUiSlider.
Customizing the slider
You can publish these blade file to resources/views/vendor/livewire-range-slider
and customize it.
To customize the noUiSlider options from the published file, as certain options cannot be passed from the Livewire component due to them not being valid JSON when used as a callback function.