santoshjena/livewire-range-slider

为 noUiSlider Range Slider 的高层封装

维护者

详细信息

github.com/santoshjena007/livewire-range-slider

主页

源代码

安装: 16

依赖: 0

推荐者: 0

安全性: 0

星标: 1

关注者: 0

分支: 19

1.0.2 2024-08-07 11:00 UTC

Requires

Requires (Dev)

MIT b5aca4b2fb2e7071bc11d2067d4c377c448d3ba0

  • Santosh Jena <santoshk.jena.woop@hyscaler.com>

livewire-range-slidersantoshjena

This package is not auto-updated.

Last update: 2024-09-19 10:08:12 UTC

README

一个简单的 noUiSlider blade 组件，用于 Livewire 组件。

安装

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

composer require santoshjena/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" />