How can I create register pointer events of the -ms-thumb element on a basic range input in two input overlays in IE?

Question

How can I create register pointer events of the -ms-thumb element on a basic range input in two input overlays in IE?

I want to do a range input with two knobs. I made one superimposed two inputs with a type. I use css property pointer events to disconnect a track from intercepting any click to get into the main finger. This works great in Chrome and Firefox. It seems that any pointer event is not firing in IE 11 or Edge. How to get a pseudo-element -ms-thumbfor collecting pointer events?

I prepared a code pen to illustrate the problem. https://codepen.io/RemkoBoschker/pen/jzLgXq

The same code is below

@mixin thumb($input-height, $input-border-radius, $input-thumb-color) {
    width: $input-height;
    height: $input-height;
    border: none;
    pointer-events: auto;
    border-radius: $input-border-radius;
    background-color: $input-thumb-color;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

/* https://codepen.io/rendykstan/pen/VLqZGO8 */
@mixin range-slider(
    $width,
    $height,
    $input-top,
    $input-bg-color,
    $input-thumb-color,
    $float: none,
    $input-height: 20px,
    $input-border-radius: 14px,
    $bubble-width: 100px
) {
    position: relative;
    width: $width;
    margin-left: (100% - $width) / 2;
    height: $height;
    float: $float;
    text-align: center;

    input[type='range'] {
        -webkit-appearance: none;
        pointer-events: none;
        height: $input-height;
        padding: 0;
        position: absolute;
        left: 0;
        top: $input-top;
        height: $input-height;
        width: 100%;
        border-radius: $input-border-radius;
        border: 1px solid grey;
        background: none;
        &:focus,
        &:active {
            outline: none;
        }
        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            box-sizing: content-box;
            @include thumb($input-height, $input-border-radius, $input-thumb-color);
        }
        &::-moz-range-thumb {
            @include thumb($input-height, $input-border-radius, $input-thumb-color);
        }
        &::-ms-thumb {
            @include thumb($input-height, $input-border-radius, $input-thumb-color);
        }
        &::-webkit-slider-runnable-track {
            /* your track styles */
        }
        &::-moz-range-track {
            -moz-appearance: none;
            background: none;
        }
        &::-ms-track {
            /* should come after -webkit- */
            border-color: transparent;
            color: transparent;
            background: transparent;
            /* again your track styles */
        }
        &::-ms-fill-upper {
            background: transparent;
        }
        &::-ms-fill-lower {
            background: transparent;
        }
        &::-ms-tooltip {
            display: none;
        }
    }
}

.range-slider {
        @include range-slider(80%, 54px, 30px, #f1efef, green, left, 20px, 14px, 80px);
    }

<div class="range-slider">
    <input type="range" step="1" min="0" max="10" value=5>
    <input type="range" step="1" min="0" max="10" value="3">
</div>