How do I make the -ms-thumb pseudo element register pointer events on underlying range input in two input overlay in IE? - css

Question

I want to make a range input with two handles. I have made one overlaying two inputs with type range. I use the css property pointer events to disable the track from intercepting any click meant to hit the underlying thumb. This works fine in Chrome and in Firefox. Is does not seems to pickup any pointer events in IE 11 or Edge. How do I get the -ms-thumb pseudo element to pick up the pointer events?
I have prepared a code pen to illustrate the problem. https://codepen.io/RemkoBoschker/pen/jzLgXq
The same code is included 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>
I have also written a cross-browser version using js.
https://codepen.io/RemkoBoschker/pen/bvaQBw
I also posted a bug report with Microsoft
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16592591/