CSS pointer-events for pseudo elements in internet explorer 11 and Edge

Question

So I have a range input with the css rules shown below. The goal is to have only the thumb of the range respond to pointer events. Works fine in Chrome and Safari. But in ie-11 and Edge, the entire input stops working. I know that pointer-events is experimental, but I also know it is supported in both of those browsers, but maybe not for pseudo-elements?

input[type="range"] {
    pointer-events: none;
}

input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
}

input[type="range"]::-ms-thumb {
    pointer-events: auto;
}

Answer 1

First, please refer to the following sample:

<style>  
    .bottom {
        background: yellow;
        width: 600px;
        height: 200px;
    }
    .top {
        width: 600px;
        height: 200px;
        position: absolute;
        top: 0;
        left: 0;
        /*pointer-events: none;*/
    }
    .test{
        /*pointer-events: none;*/
    }
    div{
            display:block;
    }
</style>

<div>
    <!-- bottom div -->
    <div class="bottom">
        <br>
        <input type="range"/>
        <br>
        <input type="range"  class="test"/>(pointer-events: none)
        <br>
    </div>
    <!-- top div -->
    <div class="top">
    </div>
</div>

In this sample, because the top div is on the top of the range element, so we can't select range (using IE, Microsoft Edge and Microsoft Edge(Chromium)).

After adding the pointer-events: none; in the top class, they are able to select.

Then, if we add the pointer-events: none; for the second range element, in IE browser and Microsoft Edge (chromium), the second range input can't be selected. But in Microsoft Edge (Microsoft Edge 41.16299.1480.0), it is still can be selected. It seems that this is the Edge browser default behavior or issue, I will feedback this issue. So, you could consider to use this method to add top div.

Second, since the new Microsoft Edge is chromium based, you could try to install the new Microsoft Edge and use it.

Besides, I think there have another choice, you could use JQuery script to find the range input elements and use the disabled property to enable/disable it.

    $("input[type='range']")[1].disabled = true; //disable