ysz/lw-range-slider
最新稳定版本：2.0.0
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 or higher
-
(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>
统计信息
- 总下载量： 4.94k
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 2
- 点击次数： 1
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： MIT
- 更新时间： 2023-06-15