Рейнджлер большой палец позади на ходу только для браузера Firefox .. как это исправить? мой код приведен ниже

Question

Привет, я использую два значения бегунка диапазона, это хорошо для работы на Chrome и Safari, но браузер Mozilla не поддерживает, я стараюсь изо всех сил не могу решить эту проблему

input[type=range]:nth-child(1)::-moz-range-thumb {
  background-color: blue;
  z-index:999;
}
input[type=range]:nth-child(2)::-moz-range-thumb {
  background-color: green;
 
}
input[type=range]{
  position:absolute;
}

<input type="range" min="0" max="100" step="5" value="20"/>
<input type="range" min="0" max="100" step="5" value="90"/>

Answer 1

input[type="range"] {
 pointer-events: none;
}

input[type=range]::-moz-range-thumb 
{
 z-index: 10; 
 pointer-events: all;
}

Answer 2

Смотрите здесь: http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html

::-moz-range-thumb в FIREFOX

::-webkit-slider-runnable-track ХРОМ, САФАРИ, ОПЕРА

::-ms-thumb в ИНТЕРНЕТ EXPLORER 10 +

И не использовать:

input[type=range]{
  position:absolute;
}

input[type=range]:nth-child(1)::-moz-range-thumb {
  background-color: blue;
  z-index:999;
}
input[type=range]:nth-child(2)::-moz-range-thumb {
  background-color: green;
 
}

 input[type=range]:nth-child(1)::-webkit-slider-runnable-track {
  background-color: blue;
  z-index:999;
}
 input[type=range]:nth-child(2)::-webkit-slider-runnable-track {
  background-color: green;
 
}
input[type=range]:nth-child(1)::-ms-thumb{
  background-color: blue;
  z-index:999;
}
input[type=range]:nth-child(2)::-ms-thumb {
  background-color: green;
 
}

<input class="range1" type="range" min="0" max="100" step="5" value="20"/>
<input class="range2" type="range" min="0" max="100" step="5" value="90"/>