如何在IE中的两个输入覆盖中的基础范围输入上制作-ms-thumb伪元素寄存器指针事件？

Question

我想用两个手柄做一个范围输入.我已经用类型范围覆盖了两个输入.我使用css属性指针事件来禁止轨道拦截任何意图击中底层拇指的点击.这在Chrome和Firefox中运行良好.是不是在IE 11或Edge中拾取任何指针事件.如何获取-ms-thumb伪元素来获取指针事件？

我准备了一个代码笔来说明问题.https://codepen.io/RemkoBoschker/pen/jzLgXq

下面包含相同的代码

@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>

我还使用js编写了一个跨浏览器版本.

https://codepen.io/RemkoBoschker/pen/bvaQBw

我还向微软发布了一个错误报告

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16592591/