A simple noUiSlider blade component for your Livewire Components.
To get started, require the package to your project's composer.json
composer require jantinnerezo/livewire-range-sliderNext, add the scripts component to your template after the @livewireScripts.
<html>
<body>
<!-- @livewireScripts -->
<x-livewire-range-slider::scripts />
</body>
</html>This package is meant to use with Livewire components. Make sure you are using it with Livewire projects only.
-
PHP 7.4 or higher
-
Laravel 8 and 9
-
noUiSlider - already included into the package's bundled scripts.
Assuming you have this properties inside your livewire component.
public $options = [
'start' => [
10,
20
],
'range' => [
'min' => [1],
'max' => [100]
],
'connect' => true,
'behaviour' => 'tap-drag',
'tooltips' => true,
'pips' => [
'mode' => 'steps',
'stepped' => true,
'density' => 4
]
];
public $values;The $options property is simply the noUiSlider options you pass to the component, for more details and configurations please check noUiSlider - JavaScript Range Slider | Refreshless.com.
The $values property is the model for the range slider values.
<x-range-slider :options="$options" wire:model="values" />In cases where you don't need range slider to update live, you can use .defer modifier.
<x-range-slider :options="$options" wire:model.defer="values" />Targetting a property for each handle also works out-of-the-box, simply add the properties comma separated.
public $options = [
'start' => [
10,
20
],
'range' => [
'min' => [1],
'max' => [100]
],
'connect' => true,
'behaviour' => 'tap-drag',
'tooltips' => true,
'pips' => [
'mode' => 'steps',
'stepped' => true,
'density' => 4
]
];
public $range = [
'min' => 10, // Targets handle 1 value
'max' => 100 // Targets handle 2 value
];<x-range-slider :options="$options" wire:model="range.min,range.max" />