{% block _Banniere_y_widget %}
    <div class="position-adjuster">
        <label for="{{ id }}">Position Y <span id="pourcentage">{{ value ? value : '50%' }}</span></label>
        <input type="range" id="{{ id }}" name="{{ full_name }}" value="{{ value }}" min="0" max="100" oninput="updatePositionY(this.value)">
    </div>
    <script>
        function updatePositionY() {
            const imageEditor = document.getElementById('image-position-editor');
            const pourcentage = document.getElementById('pourcentage');
            const inputY = document.getElementById('Banniere_y');
    
            inputY.addEventListener('change', function (event) {
                imageEditor.style.backgroundPositionY = `${event.target.value}%`;
                pourcentage.innerHTML = `${event.target.value}%`;
            });
        }
    </script>
{% endblock %}