Javascript IE和Edge中的范围滑块拇指css问题

我正在为我的网站创建一个范围滑块，它需要在所有浏览器上看起来都一样。我现在对IE和Edge中的滑块拇指大小有问题。我无法增加拇指的高度超过滑块轨迹

Chrome和Firefox：

IE和Edge：

代码：

Jquery：

$('input[type="range"]').on('input change',function(){

    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', orange), '
                + 'color-stop(' + val + ', #C5C5C5)'
                + ')'
                );
});

浏览链接后发现IE不会让拇指溢出轨迹。但其中提到了一个解决办法。 我可以在调整

输入[type=“range”]

高度后进行更改。但这改变了chrome和firefox的格式

无论如何都有办法解决它

小提琴：

---

下面的代码显示了一个在Edge上工作的跨浏览器滑块：

.wrap{
浮动：左；
位置：相对位置；
保证金：0.5em 0.5em；
填充：0.5em；
身高：12.5公分；
宽度：1.5em；
}
[type='range']{
位置：绝对位置；
最高：50%；
左：50%；
保证金：0；
填充：0；
宽度：12.5em；
高度：1.5em；
变换：平移（-50%，-50%）旋转（-90度）；
背景：透明；
字体：1em arial，无衬线；
}
[type='range']，[type='range']：：-webkit滑块拇指{
-webkit外观：无；
}
[type='range']：：-webkit滑块可运行轨迹{
框大小：边框框；
边界：无；
宽度：12.5em；
高度：0.25em；
背景：#ccc；
}
[type='range']：：-moz范围跟踪{
框大小：边框框；
边界：无；
宽度：12.5em；
高度：0.25em；
背景：#ccc；
}
[type='range']：：-ms轨道{
框大小：边框框；
边界：无；
宽度：12.5em；
高度：0.25em；
背景：#ccc；
}
[type='range']：：-webkit滑块拇指{
边缘顶部：-0.625em；
框大小：边框框；
边界：无；
宽度：1.5em；
高度：1.5em；
边界半径：50%；
背景:#f90；
}
[type='range']：：-moz-range-thumb{
框大小：边框框；
边界：无；
宽度：1.5em；
高度：1.5em；
边界半径：50%；
背景:#f90；
}
[type='range']：：-ms thumb{
边际上限：0；
框大小：边框框；
边界：无；
宽度：1.5em；
高度：1.5em；
边界半径：50%；
背景:#f90；
}

欢迎链接到某个解决方案，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及它为什么在那里，然后引用您链接到的页面最相关的部分，以防目标页面不可用。我编辑这篇文章是为了保留代码和原始链接，因为我指的是其他人的作品。你找到解决方案了吗？

input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
     outline:none !important;
    border-radius: 6px;
    height: 8px;
    width:100%;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.15, orange),
        color-stop(0.15, #C5C5C5)
    );
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    cursor:pointer;

    background-color: orange;
    border: 1px solid orange;
    height: 20px;
    width: 20px;
    border-radius:50%;
    transition:100ms;

}



input[type='range']:hover::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    cursor:pointer;

    background-color: orange;
    border: 1px solid orange;
    height: 25px;
    width: 25px;
    border-radius:50%;

}


/*Firefox */

  input[type="range"]::-moz-range-thumb {

  background-color: orange;
    border: 1px solid orange;
    height: 20px;
    width: 20px;
    border-radius:50%;
    cursor:pointer;
  }

  input[type="range"]:hover::-moz-range-thumb {

  background-color: orange;
    border: 1px solid orange;
    height: 25px;
    width: 25px;
    border-radius:50%;
    cursor:pointer;
  }


input[type=range]::-moz-range-track {
  background:none;
}



/*IE and Edge */

input[type=range]::-ms-thumb{

  background-color: orange;
    border: 1px solid orange;
    height: 20px;
    width: 20px;
    border-radius:50%;
    cursor: hand;
  }


input[type=range]::-ms-fill-upper {
    background-color: #C5C5C5;

  }

input[type=range]::-ms-fill-lower {
   background-color: orange;

  }

  input[type=range]::-ms-track {

border:none;
color:transparent;
height:8px;
}

input[type="range"]::-ms-tooltip {
    display: none; /*tooltip makes thumb sliding lagy*/
}

$('input[type="range"]').on('input change',function(){

    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', orange), '
                + 'color-stop(' + val + ', #C5C5C5)'
                + ')'
                );
});