Css 范围滑块样式没有'；我不能紧张地工作

我的CSS样式的范围滑块不工作的边缘。我怎样才能解决这个问题

我在网上寻找解决办法。并添加了一些代码，但仍然不起作用

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%; 
  background: #33A2D9;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #33A2D9;
  cursor: pointer;
}
/*I added this to fix for edge but it doesn't work */
input[type=range]::-ms-thumb{
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: #33A2D9 !important;
    cursor: pointer  !important;;
}
input[type=range]::-ms-fill-upper {
    border-radius: 5px !important;
    background: #d3d3d3 !important;
}
input[type=range]::-ms-fill-lower {
    border-radius: 5px !important;
    background: #d3d3d3 !important;
}

它应该是什么样子（例如在Firefox上）：

它在边缘上的外观：

您的“错误”（如果我们可以这样称呼它的话）给了输入一个

背景。您希望为其提供透明的
背景色
，并为
轨迹提供所需的阴影

另外，作为次要的旁注和一般规则，避免使用
背景色
而不是
背景色
。它较短，但它设置了一系列其他
后台-
属性，这些属性通常是您不关心的，但却是常见错误的来源

因为它往往是重复的，所以我在SCSS中写道：

$输入高度：16px；
$轨道高度：6px；
$thumb bg:#33A2D9；
$track bg:#D3；
@混合滑块拇指{
宽度：$输入高度；
高度：$输入高度；
边界半径：$输入高度/2；
背景颜色：$拇指背景；
外观：无；
}
@混合滑块轨迹{
高度：$轨道高度；
边界半径：$轨道高度/2；
背景色：$轨道背景；
外观：无；
}
.滑块[类型=范围]{
-webkit转换：.2s；
-webkit外观：无；
外观：无；
宽度：100%；
高度：$输入高度；
背景色：透明；
大纲：无；
不透明度：0.7；
转变：不透明度；
光标：指针；
&：悬停，&：聚焦，&：激活{
不透明度：1；
}
&：-webkit滑块-{
&可运行轨道{
-webkit外观：无；
@包括滑块轨迹；
}
&拇指{
-webkit外观：无；
@包括滑块拇指；
边距顶部：-（$input height-$track height）/2；
}
}
&：-moz范围-{
&跟踪{
@包括滑块轨迹；
}
&拇指{
@包括滑块拇指；
边际上限：0；
}
}
&：-ms-{
&跟踪{
@包括滑块轨迹；
}
&填充上部{
@包括滑块轨迹；
}
&填平{
@包括滑块轨迹；
}
&拇指{
@包括滑块拇指；
边际上限：0；
}
}
}

导致以下CSS：


.slider[类型=范围]{
-webkit外观：无；
-webkit转换：.2s；
宽度：100%；
高度：16px；
边界半径：3px；
背景色：透明；
大纲：无；
不透明度：0.7；
转变：不透明度；
光标：指针；
}
.slider[type=range]：悬停，.slider[type=range]：聚焦，.slider[type=range]：活动{
不透明度：1；
}
.slider[类型=范围]：-webkit slider可运行轨迹{
高度：6px；
边界半径：3px；
背景色：#D3；
}
.slider[类型=范围]：-webkit滑块拇指{
宽度：16px；
高度：16px；
边界半径：8px；
背景色：#33A2D9；
-webkit外观：无；
外观：无；
页边顶部：-5px；
}
.滑块[类型=范围]：-moz范围轨迹{
高度：6px；
边界半径：3px；
背景色：#D3；
}
.slider[类型=范围]：-moz范围拇指{
宽度：16px；
高度：16px；
边界半径：8px；
背景色：#33A2D9；
边际上限：0；
}
.滑块[类型=范围]：-ms轨迹{
高度：6px；
边界半径：3px；
背景色：#D3；
}
.滑块[类型=范围]：-ms填充上限{
高度：6px；
边界半径：3px；
背景色：#D3；
}
.滑块[类型=范围]：-ms填充下限{
高度：6px；
边界半径：3px；
背景色：#D3；
}
.滑块[类型=范围]：-ms thumb{
宽度：16px；
高度：16px；
边界半径：8px；
背景色：#33A2D9；
边际上限：0；
}
如果您想让人们帮助调试某些东西，请添加完整的示例（最好直接在代码段编辑器或代码笔中添加）。非常感谢您提供的详细帮助！我现在只能做了，因为我在度假。所以我以前无法检查答案。当你告诉我如何，我也可以给你更多的分数！又来了！