How to perform zoom events by tweezing a "draggable" element?

Question

I have an element that uses ui dragagble, which works when drag element, but I wish I could call the methods zoomIn() / zoomOut(), when you were on the phone, through that pincer event: Pinch Event.

Example image of the event:

How could I capture this inside the draggable event? I put more or less as I imagine it should be...

$('#area_livre').draggable({
                        // stack: 'img',
                        cursor: 'move',
                        // revert: true,
                        // revertDuration: 250,
                        zIndex: 3,
                        start: function (event, ui) {
                        },
                        drag: function (event, ui) {
                            var zoom = //COMO PODERIA CHAMAR OS EVENTOS ZOOM IN / ZOOM OUT AQUI?
                            var original = ui.originalPosition;
                
                            ui.position = {
                                left: (e.clientX - click.x + original.left) / zoom,
                                top:  (e.clientY - click.y + original.top ) / zoom
                            };
                        },
                        stop: function (event, ui) {
                        }
                    });

These are the methods that zoom in on the element:

            $scope.scalePDF = 1.0;
            var MIN_SCALE = 0.25;
            var MAX_SCALE = 10.1;

            function zoomIn() {
                var newScale = $scope.scalePDF;
                newScale += 0.5; 
                newScale = newScale.toFixed(2);
                newScale = Math.ceil(newScale * 10) / 10;
                
                newScale = Math.min(MAX_SCALE, newScale);
                    if(newScale < MAX_SCALE) {
                       $scope.scalePDF = newScale; 
                    }
            }
            document.getElementById("zoomIn").addEventListener("click", zoomIn);
          
            function zoomOut() {
                var newScale = $scope.scalePDF;
                newScale -= 0.5; 
                newScale = Math.max(MIN_SCALE, newScale);
                newScale = newScale.toFixed(2);
                newScale = Math.ceil(newScale * 10) / 10;
                if (newScale > MIN_SCALE) {
                   $scope.scalePDF = newScale;
                }
            }
            document.getElementById("zoomOut").addEventListener("click", zoomOut);

The scaling arrow css Transform Scale:

  var zoom_el = document.getElementById('area_livre');
 var transformString = 'scale('+Math.abs($scope.scalePDF)+')',
                  transformOriginString = 'center 0';

                    zoom_el.style.transform = transformString;
                    zoom_el.style['-ms-transform'] = transformString;
                    zoom_el.style['-webkit-transform'] = transformString;
                    zoom_el.style['-moz-transform'] = transformString;
                    zoom_el.style['-o-transform'] = transformString;

                    zoom_el.style.transformOrigin = transformOriginString;
                    zoom_el.style['-ms-transform-origin'] = transformOriginString;
                    zoom_el.style['-webkit-transform-origin'] = transformOriginString;
                    zoom_el.style['-moz-transform-origin'] = transformOriginString;
                    zoom_el.style['-o-transform-origin'] = transformOriginString;

How would html be basically:

    <div id="container"><div id="area_livre" class="area-livre"> conteúdo arrast
ável e expansível</div></div>
    <button id="zoomIn" onclick="zoomIn()">+</button><br>
    <button id="zoomOut" onclick="zoomOut()">-</button>

Additional details:

The viewport is currently this:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no, viewport-fit=cover">

I know there’s a way to do this with CSS, with the attribute touch-action, but it’s not working:

.area-livre {
               position:relative;
               top:0;
               left:0;
               z-index: 15;
               width: 98%;
               height: 98%;
               overflow: scroll;
               touch-action: auto;
            }