Как исправить отображение input range в Mozilla?

Question

[rusikus]

Собственно, во всех браузерах кроме Mozilla отображается корректно, вот так:

В вышеупомянутом браузере это выглядит вот так:

Различные варианты с z-index не помогают. Собственно, вопрос в том, как сделать чтобы левый ползунок отображался поверх поля, как это и должно быть, а не наоборот.
Код HTML:

<fieldset class="filter-price">
   <legend class="col-form-label col-sm-2 pt-0"><h3 class="h6">Цена</h3></legend>
    <div class="price-wrap">
      
      <div class="price-wrap-1">от 
        <input id="one">
        <label for="one">руб.</label>
      </div>
      <div class="price-wrap_line">-</div>
      <div class="price-wrap-2">до 
        <input id="two">
        <label for="two">руб.</label>
      </div>
    </div>
    <div class="price-field">
 
      <input type="range"  min="100" max="500" value="100" id="lower">
      <input type="range" min="100" max="500" value="500" id="upper">
    </div>
     
  </fieldset>

Код CSS:

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.filter-price {
  width: 220px;
  border: 0;
  padding: 0;
  margin: 0;
  margin-left: -15px; 
  padding-bottom: 20px;
}

.price-title {
  position: relative;
  color: #000;
  font-size: 14px;
  line-height: 1.2em;
  font-weight: 400;
}

.price-field {
  position: relative;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  background: rgba(248, 247, 244, 0.2);
  padding-top: 15px;
  padding-left: 16px;
  border-radius: 3px;
}

.price-field input[type=range] {
    position: absolute;
}

/* Reset style for input range */

.price-field input[type=range] {
  width: 188px;
  height: 7px; 
  border: 0;
  outline: 0;
  box-sizing: border-box;
  border-radius: 5px;
  pointer-events: none;
  -webkit-appearance: none;
}

.price-field input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

.price-field input[type=range]:active,
.price-field input[type=range]:focus {
  outline: 0;
}

.price-field input[type=range]::-ms-track {
  width: 188px;
  height: 7px; 
  border: 0;
  outline: 0;
  box-sizing: border-box;
  border-radius: 5px;
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  color: transparent;
  border-radius: 5px;
}

/* Style toddler input range */

.price-field input[type=range]::-webkit-slider-thumb { 
  /* WebKit/Blink */
    position: relative;
    -webkit-appearance: none;
    margin: 0;
    border: 0;
    outline: 0;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    margin-top: -6px;
    background-color: #ff8069;
    cursor: pointer;
    cursor: pointer;
    pointer-events: all;
    z-index: 1000;
}

.price-field input[type=range]::-moz-range-thumb { 
  /* Firefox */
  position: relative;
  appearance: none;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  margin-top: -6px;
  background-color: #ff8069;
  cursor: pointer;
  cursor: pointer;
  pointer-events: all;
  z-index: 1000;
}

.price-field input[type=range]::-ms-thumb  { 
  /* IE */
  position: relative;
  appearance: none;
  margin: 0;
  border: 0;
  outline: 0;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  margin-top: -6px;
  background-color: #ff8069;
  cursor: pointer;
  cursor: pointer;
  pointer-events: all;
  z-index: 1000;
}

/* Style track input range */

.price-field input[type=range]::-webkit-slider-runnable-track { 
  /* WebKit/Blink */
  width: 188px;
  height: 8px;
  cursor: pointer;
  background: #cbd1d8;
  border-radius: 5px;
}

.price-field input[type=range]::-moz-range-track { 
  /* Firefox */
  width: 188px;
  height: 8px;
  cursor: pointer;
  background: #cbd1d8;
  border-radius: 5px;
  z-index: 10;
}

.price-field input[type=range]::-ms-track { 
  /* IE */
  width: 188px;
  height: 8px;
  cursor: pointer;
  background: #cbd1d8;
  border-radius: 5px;
}

/* Style for input value block */

.price-wrap {
  display: flex;
  justify-content: center;
  color: #000;
  font-size: 14px;
  line-height: 1.2em;
  font-weight: 400;
  margin-bottom: 7px;
}

.price-wrap-1, 
.price-wrap-2 {
  display: flex;
}

.price-title {
  margin-right: 5px;
  backgrund: #d58e32;
}

.price-wrap_line {
  margin: 0 10px;
}

.price-wrap #one, 
.price-wrap #two {
  width: 30px;
  text-align: right;
  margin: 0;
  padding: 0;
  margin-right: 2px;
  background:  0;
  border: 0;
  outline: 0;
  color: #000;
  font-family: 'Karla', 'Arial', sans-serif;
  font-size: 14px;
  line-height: 1.2em;
  font-weight: 400;
}



/* Style for active state input */
    
.price-field input[type=range]:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.5px #ff8069;
  transition-duration: 0.3s;
}

.price-field input[type=range]:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.5px #ff8069;
  transition-duration: 0.3s;
}


label {
    display: block;
    margin-bottom: 0px;
}

Макет можно посмотреть в реальном времени на https:// dev . weylandyutani . xyz/ (кликнуть на значок фильтра в правом верхнем углу)
Заранее спасибо!

Answer 1

[Владислав]

Лучше не стилизовать инпут таким образом, т.к. нельзя гарантировать его корректное отображение в разных браузерах. Можно написать кастомный на дивах которые при движении будут передавать значения в скрытый нативный селект или использовать готовое решение в виде плагина.

Comments

[rusikus]

Mooncake8

готовое решение в виде плагина

Например?

[Владислав]

rusikus, а я не знаю в какой среде разработка, что там jquery, vue, react или просто чистый js?

[rusikus]

Mooncake8, bootstrap 4, JQuery и немного чистого js

[Владислав]

можно погулить "jquery range input plugin" и выбрать понравившийся, вот этот норм https://refreshless.com/nouislider/

[rusikus]

Mooncake8, окей, спасибо его и буду юзать