cv-site/templates/partials/widgets/zoom-control.html

{{define "zoom-control"}}
<!-- Zoom Control (Fixed Bottom Center, Draggable) - Hyperscript Enhanced -->
<div id="zoom-control" class="zoom-control no-print zoom-hidden" role="group" aria-label="{{.UI.Widgets.ZoomControl.GroupLabel}}"
     _="on load call initZoomControl(me)
        on mousedown(clientX, clientY) if isZoomDragTarget(event.target) call startZoomDrag(me, clientX, clientY) then halt the event end
        on mousemove(clientX, clientY) from document if moveZoomDrag(me, clientX, clientY) halt the event end
        on mouseup from document call endZoomDrag(me)">

    <button
        id="zoom-close"
        class="zoom-close-btn"
        aria-label="{{.UI.Widgets.ZoomControl.CloseLabel}}"
        title="{{.UI.Widgets.ZoomControl.CloseTitle}}"
        _="on click call hideZoomControl()">
        <iconify-icon icon="mdi:close" width="16" height="16" style="pointer-events: none;"></iconify-icon>
    </button>

    <span class="zoom-value zoom-value-min" aria-hidden="true">25</span>

    <input
        type="range"
        id="zoom-slider"
        class="zoom-slider"
        min="25"
        max="300"
        step="1"
        value="100"
        aria-label="{{.UI.Widgets.ZoomControl.SliderLabel}}"
        aria-valuemin="25"
        aria-valuemax="300"
        aria-valuenow="100"
        aria-valuetext="100%"
        _="on input call handleZoomInput(me)">

    <span class="zoom-value zoom-value-max" aria-hidden="true">300</span>

    <button
        id="zoom-reset"
        class="zoom-reset-btn"
        aria-label="{{.UI.Widgets.ZoomControl.ResetLabel}}"
        title="{{.UI.Widgets.ZoomControl.ResetTitle}}"
        aria-live="polite"
        _="on click call handleZoomReset()">
        <span id="zoom-value-current">100</span>
    </button>
</div>
{{end}}