How to use properly

[SturmB]

I am having two issues so far with this component.

First, how do I fire a Livewire event from this component so that another Livewire component, listening for that event, can capture it and perform actions? I figured the event names were the same listed in the noUISlider docs, but I've tried wire:change="onChange" without success. Even wire:click doesn't seem to work after the first click-and-drag on a slider handle.

Second, Only the second slider handle operates without an error. That's not to say it's doing anything, though, as evidenced by my attempt to log the $values during a wire:click event; it just logs an empty array ([]). Worse, though, is when I attempt to move the first handle (or the range itself). If I attempt that, I immediately get slapped with the TypeError Cannot assign string to property App\Http\Livewire\TierSlider::$values of type array message. Digging further, it's trying to assign the string "values" to a "params" array. I have no idea how to handle this.

For reference, here is the Livewire component (both front and back) that I created to use the slider.

<?php

namespace App\Http\Livewire;

use Barryvdh\Debugbar\Facades\Debugbar;
use Livewire\Component;

class TierSlider extends Component
{
    public array $options = [
        "start" => [10, 20],
        "range" => [
            "min" => [1],
            "max" => [100],
        ],
        "connect" => true,
        "behaviour" => "tap-drag",
        "tooltips" => true,
        "pips" => [
            "mode" => "steps",
            "stepped" => true,
            "density" => 4,
        ],
    ];

    public array $values = [];

    public function render()
    {
        return view("livewire.tier-slider");
    }

    public function onChange()
    {
        Debugbar::info($this->values);
    }
}

{{-- resources/views/livewire/tier-slider.blade.php --}}
<div class="m-6">
    <x-range-slider :options="$options" wire:model="values" wire:click="onChange" />
</div>

I'm simply calling this in a blade template:

<livewire:tier-slider />

If I'm using this component incorrectly, please tell me what I need to do instead.

[jantinnerezo]

Hi @SturmB

I have a mistake on the sample code snippet, the values property should not be an array but a string.

public string $values = '';

It should be a numeric value instead of string which I will fix in the next release.

Let me know if you still have issues or questions.

[SturmB]

Okay, I see now. It looks like a single public float $value = 0; works if you have a single handle or only need the value of the leftmost handle. Thank you, @jantinnerezo!

The second example code snippet, with the array $range, does work for sliders with multiple handles. However, it appears to cast those numbers to strings rather than leaving them as floats. It's not a big deal since I can simply use floatval() to turn them back into floats again, but it might be worth looking at for a future release.