输入滑块上的线性渐变在IE 11 /边缘中无法正常工作

Question

我有以下代码来设置我在IE中的范围滑块：

input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
border: 20px solid;
border-radius: 50px !important;
color: transparent;
transition: border 1000ms ease;
}

input[type=range]::-ms-fill-lower {
background: linear-gradient(to right, #ff3232 0%, #43e018 100%);
border: 2px solid #000101;
border-radius: 1px;
}

input[type=range]::-ms-fill-upper {
background: linear-gradient(to right, #ff3232 0%, #43e018 100%);
border: 2px solid #000101;
border-radius: 1px;
}

input[type=range]::-ms-thumb {
border: 4px solid;
border-radius: 50%;
height: 28px;
width: 28px;
max-width: 80px;
position: relative;
bottom: 12px;
background-color: #000000;
cursor: -webkit-grab;
transition: border 1000ms ease;
}

这给了我以下结果：

  

如您所见，线性渐变剂量似乎正常工作。 所以我想要的是，线性渐变在一个流程中从红色变为绿色。