jantinnerezo / livewire-range-slider
用于noUiSlider范围选择器的Tall Stack包装器
1.0.1
2022-06-11 14:39 UTC
Requires
- php: ^7.4|^8.0
- illuminate/support: ^8.67|^9.0
Requires (Dev)
- livewire/livewire: ^2.8
- orchestra/testbench: ^6.0
- phpunit/phpunit: ^9.5
This package is auto-updated.
Last update: 2024-09-24 13:24:53 UTC
README
一个简单的noUiSlider blade组件,适用于您的Livewire组件。
安装
要开始使用,请将包要求添加到项目的composer.json文件中
composer require jantinnerezo/livewire-range-slider
接下来,在@livewireScripts
之后将脚本组件添加到模板中。
<html> <body> <!-- @livewireScripts --> <x-livewire-range-slider::scripts /> </body> </html>
要求
此包旨在与Livewire组件一起使用。请确保您仅在Livewire项目中使用它。
-
PHP 7.4或更高版本
-
Laravel 8和9
-
noUiSlider - 已包含在包捆绑的脚本中。
使用方法
假设您在Livewire组件中有以下属性。
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;
$options
属性是传递给组件的noUiSlider选项,有关更多详细信息,请参阅noUiSlider - JavaScript Range Slider | Refreshless.com。
$values
属性是范围选择器值的模型。
Livewire的默认wire:model
属性
<x-range-slider :options="$options" wire:model="values" />
延迟
在不需要范围选择器实时更新的情况下,您可以使用.defer
修饰符。
<x-range-slider :options="$options" wire:model.defer="values" />
多个属性
为每个手柄指定属性也适用,只需简单地将属性以逗号分隔添加即可。
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" />