simon-chege/livewire-range-slider
Composer 安装命令：
composer require simon-chege/livewire-range-slider
包简介
A Tall Stack wrapper for noUiSlider Range Slider
README 文档
README
A simple noUiSlider blade component for your Livewire Components.
Installation
To get started, require the package to your project's composer.json My Version
composer require simon-chege/livewire-range-slider
Original
composer require jantinnerezo/livewire-range-slider
Next, add the scripts component to your template after the @livewireScripts.
<html> <body> <!-- @livewireScripts --> <x-livewire-range-slider::scripts /> </body> </html>
Requirements
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.
Usage
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.
Livewire's default wire:model attribute
<x-range-slider :options="$options" wire:model="values" />
Deferred
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" />
Multiple properties
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" />
统计信息
- 总下载量： 1
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 1
- 点击次数： 0
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： MIT
- 更新时间： 2023-12-13