ysz/lw-range-slider
Composer 安装命令：
composer require ysz/lw-range-slider
包简介
A simple noUiSlider blade component designed specifically for your Livewire Components.
README 文档
README
Inspired by https://github.com/jantinnerezo/livewire-range-slider, Please check it out!
An effortless blade component, noUiSlider, tailored for your Livewire Components.
Installation
You can install the package via composer:
composer require ysz/lw-range-slider
Register the script component to template after the @livewireScripts
<html> <body> <!-- @livewireScripts --> <x-livewire-range-slider::scripts /> </body> </html>
Requirements
This package is designed to be used in conjunction with Livewire components. Please ensure that you exclusively utilize it within Livewire projects.
-
PHP 8.1 or higher
-
Laravel 10.x, 11.x, or 12.x
-
(included) noUiSlider
How to use it!
Please add this properties inside your existing Livewire component.
public $options = [ 'start' => [ 20, 50 ], 'range' => [ 'min' => [1], 'max' => [100] ], 'connect' => true, 'behaviour' => 'tap-drag', 'tooltips' => true, 'pips' => [ 'mode' => 'steps', 'stepped' => true, 'density' => 4 ], ... ]; public array $sliderValues;
The $options property represents the noUiSlider options that you provide to the component. For additional details and configurations, please refer to noUiSlider
The $sliderValues property is the model for the range slider values.
Livewire's default wire:model attribute
<x-range-slider :options="$options" wire:model.live="sliderValues" />
Deferred Updating
In cases where you don't need data updates to happen live, you can remove all modifiers to batch data updates with the next network request.
<x-range-slider :options="$options" wire:model="sliderValues" />
Lazy Updating
You can also use .blur modifier to update the data after the user has finished interacting with the slider.
<x-range-slider :options="$options" wire:model.blur="sliderValues" />
Emitting events
To update the start or range values for noUiSlider, call the firePriceRangeChangedEvent method.
<?php namespace App\Http\Livewire; use Livewire\Component; use YsZ\LwRangeSlider\Contracts\CanFireEvents; class AvailableUnits extends Component { use CanFireEvents; public function updated($name, $value) { $this->firePriceRangeChangedEvent(min: 80, max: 150, minRange: 100, maxRange: 200); } }
this will immediately update the range and start values for noUiSlider.
Customizing the slider
You can publish these blade file to resources/views/vendor/livewire-range-slider and customize it.
php artisan vendor:publish --tag=lw-range-slider-views
To customize the noUiSlider options from the published file, as certain options cannot be passed from the Livewire component due to them not being valid JSON when used as a callback function.
<div x-data='LivewireRangeSlider({ options: { start: [{{ $this->minPrice }}, {{ $this->maxPrice }}], connect: true, tooltips: true, tooltips: { to: function (value) { return window?.currencyFormat("site", value); }, from: function (value) { return window?.currencyFormat("site", value); } }, range: { min: {{ $this->minPrice }}, max: {{ $this->maxPrice }} } }, models: {!! json_encode($getWireModel($attributes)) !!}, modifier: "{{ $getWireModelModifier($attributes) }}" })' @focusout="setValue" {{ $attributes }} wire:ignore > <div x-ref="range"></div> {{ $slot }} </div>
ysz/lw-range-slider 适用场景与选型建议
ysz/lw-range-slider 是一款 基于 PHP 开发的 Composer 扩展包，目前已累计 6.7k 次下载、GitHub Stars 达 2， 最近一次更新时间为 2023 年 06 月 15 日， 在 PHP 生态内属于活跃度较高的组件。
我们在过去多个企业项目中使用过 ysz/lw-range-slider 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。
基于 ysz/lw-range-slider 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。
线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。
承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。
统计信息
- 总下载量： 6.7k
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 2
- 点击次数： 9
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： MIT
- 更新时间： 2023-06-15