如何使所有现代浏览器都支持NoUiSlider？

Question

我在React.js Web应用程序中使用了NPM的NoUiSlider，但是在其他浏览器（例如Mozilla和Safari）上的前端显示在Chrome上存在问题，效果很好。

这是来自chrome的图像：

这是Mozilla的图片：

我想指出的是，除了使用react bootstrap Row - Col进行一些颜色更改和显示位置外，我没有添加太多CSS。但是这里有一些CSS代码：

#sliderFilter {
width: 200px;
float: left;
background-color: transparent !important;
border: 1px solid transparent;
margin-top:0px !important;
margin-left:25px ;
margin-right:50px ;
}
.noUi-handle {
border-radius: 50% !important;
height: 30px !important;
width: 30px !important;
background-color: #0bb5e5 !important;
}
.noUi-connect {
 background-color: #004d67 !important;
}
.noUi-handle:before, .noUi-handle:after {
background: transparent !important;
}
.noUi-horizontal .noUi-handle {
top:-8px !important;
}
.noUi-base {
 border:1px solid #ccc !important;
 border-radius: 50px !important;
 background-color: #fff !important;
 box-shadow: 0px !important;
 }
.noUi-target {
box-shadow: inset 0 0px 0px #F0F0F0, 0 0px 0px -0px #BBB !important;
}
.noUi-connects {

border-radius: 50px !important;
background-color: #fff !important;
box-shadow: 0px !important;
}
.noUi-handle {
background-color: #0bb5e5 !important;
box-shadow: inset 0 0 0px #FFF, inset 0 0px 0px #EBEBEB, 0 0px 0px -0px #BBB !important;
}

是否有任何方法可以配置它并使它在其他浏览器上运行而无需更改此Package？预先谢谢你。