Livewire dynamic update of slider value as scrolled left to right for use in POST request.

I am trying to create a simple slider selector for use in a form where by the value would be passed in a post request to my controller.

I wanted to use livewire to test whether livewire works. i cannot seem to get it to display updated values as the slider is moved from left to right. The initial pass puts in 18 as part of the DOM render, but then its as though the livewire component and the controller are no longer connected.

age-slider.blade.php (livewire component)

<div>
    <input 
        type="range" 
        id="ageSlider"
        wire:model="age"
        min="18" 
        max="50" 
        step="1" 
        class="w-full slider" 
    >
     </div>

quote-calculator.blade.php (resource\view)

        <div class="form-group">
            <label class="block text-sm font-medium text-insurance-primary">Select Your Age</label>
            @livewire('age-slider') <!-- Default age of 18 -->
            <input type="hidden" name="age" id="selectedAge" value="{{ old('age', 18) }}">
            <!-- Display the selected age dynamically -->
        <div id="disp_range_val">{{ old('age', 18) }}</div>
            @error('age')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

livewire controller AgeSlider.php

<?php

namespace App\Livewire;

use Livewire\Component;

class AgeSlider extends Component
{
    public $age = 18;  // Default value

    // Update the age when the slider value changes
    public function updatedAge($value)
    {
            // Check if the event is being emitted
    \Log::info("Emitting ageUpdated with value: $value");  // Log to Laravel log file
    $this->emit('ageUpdated', $value);  // Emit event to the parent
    }

    public function render()
    {
        return view('livewire.age-slider');
    }
}

Snapey

1 year ago

Level 122

Please format your code.

If you want it to be dynamic, the element must be bound to a livewire property

dmjcv91913

1 year ago

Best Answer

Level 1

@Snapey Thank you Snapey, I just learned how to format my code for comment. I have since revised much of it, but I would be happy to share.

After reviewing over two days, I researched and thought about the issues/errors. I was able to come up with a solution. The main issue is how does the http protocol work, how does the DOM work. The solution was really in the Javascript I used. I need the event listener to be invoked after the DOM content was loaded (via layout app.blade.php) . The Javascript is invoked, and the values passed to the Livewire linked component. The form is then updated and ready for submittal .

Script in quote-calculator.blade.php

@push('scripts')
<script>
  
// Bind the event listener properly after the page is fully loaded
document.addEventListener('DOMContentLoaded', function () {
    const slider = document.getElementById('ageSlider');
    const selectedAge = document.getElementById('selectedAge');
    const dispRangeVal = document.getElementById('disp_range_val');

    if (slider) {
        // Attach the input event listener to the slider
        slider.addEventListener('input', function () {
            const ageValue = slider.value; // Use the value from the slider directly

            console.log('Slider value:', ageValue); // Log the value to check it

            // Update the hidden input field with the new value
            selectedAge.value = ageValue;

            // Optionally update the displayed value
            dispRangeVal.innerText = ageValue;

            // Emit the updated value to Livewire
            Livewire.emit('ageUpdated', ageValue);
        });
    }
});

</script>
@endpush

Please or to participate in this conversation.