dashed/livewire-range-slider
Composer 安装命令：
composer require dashed/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
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" />
dashed/livewire-range-slider 适用场景与选型建议
dashed/livewire-range-slider 是一款 基于 PHP 开发的 Composer 扩展包，目前已累计 2.94k 次下载、GitHub Stars 达 0， 最近一次更新时间为 2024 年 03 月 15 日， 在 PHP 生态内属于活跃度较高的组件。
它主要适用于以下技术方向： 「jantinnerezo」 「livewire-range-slider」 等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。
我们在过去多个企业项目中使用过 dashed/livewire-range-slider 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。
基于 dashed/livewire-range-slider 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。
线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。
承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。
与 dashed/livewire-range-slider 相关的其它包
同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：
This package provides a simple alert utilities for your livewire components.
A Tall Stack wrapper for noUiSlider Range Slider
A Tall Stack wrapper for noUiSlider Range Slider
This package provides a simple alert utilities for your livewire components. borrowed from jantinnerezo/livewire-alert
A Tall Stack wrapper for noUiSlider Range Slider
A Tall Stack wrapper for noUiSlider Range Slider
统计信息
- 总下载量： 2.94k
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 0
- 点击次数： 28
- 依赖项目数： 1
- 推荐数： 0
其他信息
- 授权协议： MIT
- 更新时间： 2024-03-15