Html IE上未显示范围滑块拇指

我的网页上有一个范围滑块，它在除IE以外的所有浏览器上都能正常工作。我使用背景图像作为thumb，但该图像没有显示在IE上，我还使用伪元素显示起点和终点，这在IE上也不可见。这是我的代码

 <input type="range" data-link="test" class="range-slider__range" min="500" step="500" max="10000">

input.range-slider__range {
 -webkit-appearance: none;
 max-width:100%;
 height: 2px;
 border:1px solid #06C3C3 !important;
 outline: none;
 padding: 0;
 margin: 50px 0;}

input.range-slider__range:before {
  content: '';
  width: 7px;
  height: 7px;
  position: relative;
  display: block;
  top: -3px;
  left: -2px;
  border-radius: 50%;
  background: #06C3C3;}

input.range-slider__range:after {
  content: '';
  width: 7px;
  height: 7px;
  position: relative;
  display: block;
  top: -3px;
  left: 2px;
  border-radius: 50%;
  background: #06C3C3;}

.range-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: url("https://dummyimage.com/40/000/fff.jpg");
  width: 186px;
  height: 49px;
  background-repeat: no-repeat;
  cursor: pointer;}

.range-slider__range::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: url("https://dummyimage.com/40/000/fff.jpg");
  width: 186px;
  height: 49px;
  background-repeat: no-repeat;
  cursor: pointer;}

input.range-滑块\范围{
-webkit外观：无；
最大宽度：100%；
高度：2倍；
边框：1px实心#06C3C3！重要；
大纲：无；
填充：0；
边距：50px 0；}
输入。范围滑块\uuuu范围：之前{
内容：''；
宽度：7px；
高度：7px；
位置：相对位置；
显示：块；
顶部：-3px；
左：-2px；
边界半径：50%；
背景：#06C3C3；}
输入。范围滑块\uuuu范围：之后{
内容：''；
宽度：7px；
高度：7px；
位置：相对位置；
显示：块；
顶部：-3px；
左：2px；
边界半径：50%；
背景：#06C3C3；}
.range-slider\uu range:：-webkit滑块拇指{
-webkit外观：无；
外观：无；
背景：url（“https://dummyimage.com/40/000/fff.jpg");
宽度：186px；
高度：49px；
背景重复：无重复；
游标：指针；}
.range-slider\uu range:：-moz range thumb{
-webkit外观：无；
外观：无；
背景：url（“https://dummyimage.com/40/000/fff.jpg");
宽度：186px；
高度：49px；
背景重复：无重复；
游标：指针；}

您可以使用

：-webkit滑块thumb

和

：-moz range thumb

，它们的名字是

webkit

浏览器（如chrome/safari等）的属性，以及

moz

浏览器（用于

mozilla firefox

）

因此，它当然不会出现在IE上。对于IE，您可以使用

：-ms thumb

和

ms track

：after，：before

是用于在元素内容之后插入内容的

伪元素<代码>输入

元素没有内容。（就像

img

或

hr

等）。因此，IE中的行为是在“非内容”HTML元素上不显示

：after

或

：before

。 ，是正确的

您可以将输入包装在

标签中

并向其中添加

伪元素

以下示例（适用于IE）

输入[类型=范围]：-ms轨道{
宽度：300px；
高度：5px；
}
输入[类型=范围]：-ms thumb{
边界：无；
高度：16px；
宽度：16px；
边界半径：50%；
背景：一枝黄花；
}
标签{
位置：相对位置；
}
标签：之后，
标签：之前{
内容：''；
宽度：7px；
高度：7px；
位置：绝对位置；
显示：块；
排名：0；
边界半径：50%；
背景#06C3C3；
}
标签：之前{
左：2px；
}
标签：后{
右：2px；
}