How to create custom input range slider in angular 2?

Question

JavaScript

Hello. Faced the following problem while developing custom input range slidera.
I have a container that contains objects.

<div class="box" (mouseenter)="onEvent($event)" #container
     (mouseleave)="onEvent($event)"
     (mousemove)="coordinates($event)"
     on-click="onEvent($event)"
     on-dblclick="onEvent($event)"
     on-contextmenu="onEvent($event)">
    <p class="type">Type: {{event?.type}}</p>
    <p>x: {{clientX}}, y: {{clientY}}</p>
    <p>ctrl: {{event?.ctrlKey}}, shift: {{event?.shiftKey}}, meta: {{event?.metaKey}}</p>


    <div class="slider-container" #sliderContainer (mousemove)="moveSwitch()">
        <div id="firstSwitcher" class="slider-switch"  style="margin-left: 400px"></div>
        <input type="button" value="asdasd" style="margin-left: 300px" #firstSwitcher>
    </div>
</div>

I attached to the parent container to take coordinates from it.
(mousemove)="coordinates($event)"
But when I move over the parent container, the coordinates are captured perfectly. But the strangeness is that when I get to the child element, the coordinates begin to be removed from this element ..
Do not tell me what could be the problem?