README

本包为Laravel Livewire 3应用程序提供了一个简单方便的范围滑动组件，使用noUiSlider实现平滑和响应式的用户体验。

安装

首先，使用Composer要求包

composer require sadam/livewire-range-slider

在要求包之后，您需要安装noUiSlider并在项目中设置它。

步骤1：安装noUiSlider 使用npm安装noUiSlider

npm install nouislider

步骤2：更新app.js 安装noUiSlider后，将其导入并在您的resources/js/app.js文件中将其附加到window对象上

import noUiSlider from 'nouislider';
import 'nouislider/dist/nouislider.css';
window.noUiSlider = noUiSlider;

步骤3：编译资源在对app.js进行必要的更新后，请确保编译您的资源

npm run dev
npm run build

使用方法

按照安装步骤完成后，您可以在Livewire组件中使用范围滑动。只需在视图中包含提供的Blade组件即可

  <x-range-slider :min="0" :max="100" :step="1" wire:model="values" />

重要提示

请确保您的Livewire组件中有一个$value数组属性。此数组应至少有一个元素，但您可以包含多个元素以支持多个滑动把手。例如

public $values = [50]; // For a single handle

// or

public $values = [30, 70]; // For two handles

// or

public $values = [30, 50,90]; // For three handles

针对wire:model.live的优化

如果您喜欢，滑动组件已针对wire:model.live进行优化。这意味着只有在用户完成拖动把手后，才会发送服务器请求，从而减少请求数量并提高性能。

样式

您可以使用CSS自定义滑动组件的外观。以下是如何进行样式的示例

.noUi-target {
    background-color: #8BC34A;
    height: 12px;
    border-radius: 6px;
}

.noUi-handle {
    background-color: #212121;
    border: 2px solid #FFEB3B;
}

.noUi-connect {
    background-color: #FFEB3B;
}

.noUi-tooltip {
    background-color: #212121;
    border-radius: 8px;
    color: #ffffff;
    padding: 8px;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

许可证

本包是开源软件，使用MIT许可证MIT许可证。

adam / livewire-range-slider

维护者

详细信息

README

安装

使用方法

重要提示

针对wire:model.live的优化

样式

许可证