How can I get the value of the slider in Livewire

I have multiple sliders in a form, each with a value ranging from 0-5. Sliders work as expected and calculates properly on the page. My issue is, I am unable to get the values of each slider via Livewire.

Here is a screenshot of the form:

https://www.screencast.com/t/weEm5Zt8

Code for the sliders:

<div wire:ignore class="review-score-form fl-wrap">
    <div class="review-range-container">
        <!-- review-range-item-->
        <div class="review-range-item">
            <div class="range-slider-title">Quality</div>
            <div class="range-slider-wrap ">
                <input type="text" wire:model.defer="quality_rating" id="quality_rating" class="rate-range" data-min="0" data-max="5"  name="rgcl"  data-step="1"  value="4">
            </div>
        </div>
        <!-- review-range-item end --> 
        <!-- review-range-item-->
        <div class="review-range-item">
            <div class="range-slider-title">Pricing</div>
            <div class="range-slider-wrap">
                <input type="text" wire:model.defer="pricing_rating" id="pricing_rating" class="rate-range" data-min="0" data-max="5"  name="rgcl" data-step="1" value="3">
            </div>
        </div>
        <!-- review-range-item end --> 
        <!-- review-range-item-->
        <div class="review-range-item">
            <div class="range-slider-title">Friendliness</div>
            <div class="range-slider-wrap ">
                <input type="text" wire:model.defer="friendly_rating" id="friendly_rating" class="rate-range" data-min="0" data-max="5"  name="rgcl" data-step="1" value="5">
            </div>
        </div>
        <!-- review-range-item end -->   
        <!-- review-range-item-->
        <div class="review-range-item">
            <div class="range-slider-title">Customer Service</div>
            <div class="range-slider-wrap ">
                <input type="text" wire:model.defer="customer_service_rating" id="customer_service_rating" class="rate-range" data-min="0" data-max="5"  name="rgcl"  data-step="1" value="4">
            </div>
        </div>
        <!-- review-range-item end -->                                   
    </div>
    <div class="review-total">
        <span><input type="text" wire:model.defer="rating" name="rating" data-form="AVG({rgcl})"></span>    
        <strong>Your Score</strong>
    </div>
</div>

Component Code:

namespace App\Http\Livewire;

use Livewire\Component;

class RateProfessional extends Component
{
    public $customer_service_rating = 5;
    public $quality_rating = 5;
    public $friendly_rating = 5;
    public $pricing_rating = 5;
    public $rating = 5.0;

    protected $listeners = [
        'quality_rating',
    ];

    public function quality_rating($value)
    {
        $this->quality_rating = $value;
    }

    public function render()
    {
        return view('livewire.rate-professional');
    }

    public function submit()
    {
        dd($this->quality_rating);
    }
}

When I submit the form, the value of $this->quality_rating is always 5, no matter what the value of the slider is. I have tried to get the value using this:

$(document).ready(function() {
    $('#quality_rating').on('change', function (e) {
        livewire.emit('quality_rating', e.target.value)
    });
});

I have searched and cannot find the solution to this issue. I am fairly new to Livewire and am sure I am missing something probably pretty simple. Any help would be greatly appreciated.

Snapey

3 years ago

Level 122

One quick issue I see is that you are setting the value of the slider in blade.

Don't do this with inputs. Let the wire:model set the value and set any initial value in the component.

you don't need any javascript

remove wire:ignore

make sure your page loads livewire javascript

remove .defer from each input

open the dev network tools and check that a network request is sent when you change the value and move to another field

RayC

3 years ago

Level 10

@Snapey I did as you suggested. It's not firing when I move the slider. No error nothing. When I click submit, submit() is fired and responds as expected, minus the fact that none of the slier values are sent.

When I remove the wire:ignore, still doesn't fire when changed. And I submit the form, and a validation error is returned it removes the css styles from them and the result is like this screenshot.

https://www.screencast.com/t/R9Fpk4fNTp3

With wire:ignore in place the sliders retain their style.

Snapey

3 years ago

Level 122

@RayC These sliders rely on javascript for styling?

RayC

3 years ago

Level 10

@Snapey Yes. this is the code that styles the sliders:

$(".rate-range").ionRangeSlider({
    type: "single",
    hide_min_max: true,
});

Snapey

3 years ago

Level 122

@RayC Which is not going to work well with Livewire when the the dom is refreshed, you also need to tell this plugin to refresh and redraw the sliders.

More complicated but you would probably have to have these in an alpine component and entangle the values with Livewire.

Why do you need Livewire? What is is doing for you in this instance?

RayC

3 years ago

Level 10

@Snapey Originally I wanted it to update the ratings with out a page refresh. However, this is more work than it needs to be so I am scrapping Livewire for this instance.

Thanks for the help and input. Appreciate it.