livewire中的价格范围滑块不起作用

Question

我是livewire的新手，需要制作一个价格滑块，我在livewire刀片中使用了noUiSlider：

<h4 class="widget-title"> Price 
<span class="text-info"> {{$min}} - {{$max}} </span></h4>
<div id="slider"  class="noUiSlider" wire:ignore> </div>

然后在blade:的末尾使用了noUiSlider文档中的Js

<script>
$(document).ready(function () {
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [1, 1000],
connect: true,
range: {
'min': 1,
'max': 1000
},
pips: {
mode: 'steps',
stepped: true,
density: 4
}
});
slider.noUiSlider.on('update', function (value){
@this.set('min', value[0]);
@this.set('max', value[1]);

});

});
</script>

现在我需要从用户那里获取范围来显示相同价格范围的产品，所以livewire类如下：

class Range extends Component
{
public $min;
public $max;
public function mount()
{
$this->min = 1;
$this->max = 1000;
}

public function render()
{
$products = Product::whereBetween('selling_price', [$this->min, $this->max])->get();
return view('livewire.range')->with([
'products'=> $products
]);
}
}

现在的问题是，我在不获取价格范围内的产品的情况下更改滑块非常感谢。

Answer 1

Livewire类

class ProductsComponent extends Component
{
public $min;
public $max;

public function mount()
{
$this->min = 10;
$this->max = 100000;
}
public function render()
{
$products = Product::whereBetween('price', [$this->min, $this->max])->get();
return view('livewire.components.shop-area-component',['products' => $products]);
}
}

火线刀片

<div class="price_filter">
<div wire:ignore id="slider-range"></div>
<div class="price_slider_amount">
<span>Price :</span>
<input type="text" id="amount" placeholder="Add Your Price" />
</div>
</div>
@push('scripts')
<script>
$("#slider-range").slider({
range: true,
min: 40,
max: 600,
values: [120, 570],
slide: function (event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
@this.set('min', ui.values[0])
@this.set('max', ui.values[1])
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
</script>
@endpush