<x-dynamic-component
:component="$getFieldWrapperView()"
:field="$field"
>
<div x-data="{
state: $wire.$entangle('{{ $getStatePath() }}'),
horizontal: 50,
vertical: 50,
updateState() {
this.state = `${this.horizontal},${this.vertical}`;
console.log(this.state);
},
init() {
if (this.state) {
const parts = this.state.split(',');
this.horizontal = Number(parts[0]) || 50;
this.vertical = Number(parts[1]) || 50;
}
this.$watch('horizontal', () => this.updateState());
this.$watch('vertical', () => this.updateState());
}
}">
<!-- Interact with the `state` property in Alpine.js -->
<div class="flex flex-col gap-y-2">
<div class="flex flex-col">
<label class="text-xl font-bold" for="horizontal">Horizontal <span x-text="horizontal"></span></label>
<div>
<div class="w-full">
<input x-model="horizontal" class="w-full" name="horizontal" type="range" min="1" max="100" value="50">
</div>
<div class="flex w-full justify-between">
<span class="flex-1 text-left">Esquerda</span>
<span class="flex-1 text-center">Meio</span>
<span class="flex-1 text-right">Direita</span>
</div>
</div>
</div>
.....
</div>
</x-dynamic-component>
