jantinnerezo/livewire-range-slider

用于noUiSlider范围选择器的Tall Stack包装器

1.0.1 2022-06-11 14:39 UTC

This package is auto-updated.

Last update: 2024-09-24 13:24:53 UTC


README

Latest Stable Version Total Downloads License

一个简单的noUiSlider blade组件,适用于您的Livewire组件。

preview

安装

要开始使用,请将包要求添加到项目的composer.json文件中

composer require jantinnerezo/livewire-range-slider

接下来,在@livewireScripts之后将脚本组件添加到模板中。

<html>
    <body>
        <!-- @livewireScripts -->

        <x-livewire-range-slider::scripts />
    </body>
</html>

要求

此包旨在与Livewire组件一起使用。请确保您仅在Livewire项目中使用它。

使用方法

假设您在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" />