'nouislider with livewire how to get values

How can i get the values from nouislider in livewire? So i can compare the min and max price. I don't see how i can get the values. It has 2 handles a min and max price.

         <div wire:ignore id="slider-margin"></div>
                        <div class="d-flex">

                            <div wire:model="min_price" class="me-5" id="slider-margin-value-min" aria-valuenow="min_price"></div>
                            <div wire:model="max_price" id="slider-margin-value-max" aria-valuemax="max_price"></div>

                        </div>

class Shop extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public $min_price;
public $max_price;

public function render()
    {
 $this->products = Product::query()
 ->wherebetween('price',[$this->min_price,$this->max_price])->paginate(9);

        return view('livewire.shop',[
            'products'=>$this->products
        ]);
    }
}
laravellaravel-livewire


Solution 1:[1]

try this code:

<div wire:ignore id="slider-margin"></div>
<div class="d-flex">

    <div wire:click="setMin({{ $min_price }})" class="me-5" id="slider-margin-value-min" aria-valuenow="min_price"></div>
    <div wire:click="setMax({{ $max_price }})" id="slider-margin-value-max" aria-valuemax="max_price"></div>
</div>

and:

class Shop extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';
    public $min_price;
    public $max_price;

    public function setMax($max_price)
    {
        $this->max_price= $max_price;
    }

    public function setMin($min_price)
    {
        $this->min_price = $min_price;
    }

    public function mount()
    {
        $this->products = Product::query()
            ->wherebetween('price',[$this->min_price,$this->max_price])->paginate(9);
    }
}

Solution 2:[2]

A div is no input, so a wire:model won't do anything on it. noUiSlider builds HTML after page load, so to be able to use it for variables in Livewire, you will have to use JavaScript. You can listen for the events and use the global Livewire JS object to emit changes to your component

So, an example of how this might work:

let slider = document.getElementById('slider-margin');

slider.noUiSlider.on('update', function (values) {
    Livewire.emitTo('shop', 'sliderUpdated', values);
});

Then in your component, you can do something with the passed values:

function sliderUpdated(array $values) 
{
   $this->min_price = \Illuminate\Support\Arr::first($values);
}

Ensure to take a good read on the event docs, as I am not 100% sure above code will function straight away, but I think this will at least get you in the right direction!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Yinci

Related Questions