Как сделать так, чтобы NoUiSlider поддерживался во всех современных браузерах? - PullRequest
Новая
       89

Как сделать так, чтобы NoUiSlider поддерживался во всех современных браузерах?

0 голосов
/ 16 июня 2020

Я использую NoUiSlider из NPM в реакции. js веб-приложение, но у меня проблема с отображением интерфейса в других браузерах, таких как Mozilla и safari, на chrome , работает нормально.

Вот изображение из chrome:

enter image description here

А вот изображение из Mozilla:

enter image description here

Я хотел бы отметить, что я не добавил много CSS, кроме нескольких изменений цветов и отображения позиций с помощью реакции bootstrap Row - Col ... Однако вот код 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;
}

Есть ли способ настроить это и заставить его работать в других браузерах без изменения этого пакета? Заранее благодарю

...