Inspired by https://github.com/jantinnerezo/livewire-range-slider, Please check it out!
An effortless blade component, noUiSlider, tailored for your Livewire Components.
You can install the package via composer:
composer require ysz/lw-range-sliderRegister the script component to template after the @livewireScripts
<html>
<body>
<!-- @livewireScripts -->
<x-livewire-range-slider::scripts />
</body>
</html>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
Please add this properties inside your existing Livewire component.
public $options = [
'start' => [
20,
50
],
'range' => [
'min' => [1],
'max' => [100]
],
'connect' => true,
'behaviour' => 'tap-drag',
'tooltips' => true,
'pips' => [
'mode' => 'steps',
'stepped' => true,
'density' => 4
],
...
];
public array $sliderValues;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.
<x-range-slider :options="$options" wire:model.live="sliderValues" />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.
<x-range-slider :options="$options" wire:model="sliderValues" />You can also use .blur modifier to update the data after the user has finished interacting with the slider.
<x-range-slider :options="$options" wire:model.blur="sliderValues" />To update the start or range values for noUiSlider, call the firePriceRangeChangedEvent method.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use YsZ\LwRangeSlider\Contracts\CanFireEvents;
class AvailableUnits extends Component
{
use CanFireEvents;
public function updated($name, $value)
{
$this->firePriceRangeChangedEvent(min: 80, max: 150, minRange: 100, maxRange: 200);
}
}this will immediately update the range and start values for noUiSlider.
You can publish these blade file to resources/views/vendor/livewire-range-slider and customize it.
php artisan vendor:publish --tag=lw-range-slider-viewsTo 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.
<div
x-data='LivewireRangeSlider({
options: {
start: [{{ $this->minPrice }}, {{ $this->maxPrice }}],
connect: true,
tooltips: true,
tooltips: {
to: function (value) {
return window?.currencyFormat("site", value);
},
from: function (value) {
return window?.currencyFormat("site", value);
}
},
range: {
min: {{ $this->minPrice }},
max: {{ $this->maxPrice }}
}
},
models: {!! json_encode($getWireModel($attributes)) !!},
modifier: "{{ $getWireModelModifier($attributes) }}"
})'
@focusout="setValue"
{{ $attributes }}
wire:ignore
>
<div x-ref="range"></div>
{{ $slot }}
</div>