Zoom

<div class="acl-user-controls__zoom">
    <div class="acl-user-controls__zoom-value">
        <input class="acl-user-controls__zoom-input" type="number" min="10" max="300" value="100" readonly="readonly" />
    </div>

    <div class="acl-user-controls__zoom-button" onclick="quantityField.zoomLevel(this,'out')" value="Zoom Out"><i
            class="aforza-icons animated fadeIn">acl_minus_big</i>
    </div>
    <div class="acl-user-controls__zoom-button" onclick="quantityField.zoomLevel(this,'in')" value="Zoom In"><i
            class="aforza-icons animated fadeIn">acl_add</i></div>

</div>

<script>
    const quantityField = new acl.ACLUserControls();

    /* A quick example of catching the zoomValue event. */
    const container = document.querySelector('.acl-user-controls__zoom-input');

    container.addEventListener('zoomValue',
        function (e) {
            console.log(`Zoomlevel : ${e.detail.zoomLevel}`);
        }, false);
</script>