README

为 Livewire 组件提供的简单 noUiSlider blade 组件。

安装

要开始，将包添加到您的项目 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
Livewire
Alpine
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" />

vortechron / livewire-range-slider

维护者

详细信息

README

安装

要求

使用方法

Livewire 的默认 `wire:model` 属性

延迟

多个属性

vortechron / livewire-range-slider

维护者

详细信息

README

安装

要求

使用方法

Livewire 的默认 wire:model 属性

延迟

多个属性

Livewire 的默认 `wire:model` 属性