How can I fix Firefox input range problem?-CodePudding

I've a problem with price range input in Firefox, in every browser its works fine but in Mozilla first or second dot on range are unclickable. I was looking to fix this everywhere and can't find answer.
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Price Range</title>
  <link rel="stylesheet" href="style.css">
  <style>
    .range-slider {
      width: 480px;
      /* Match this to the SVG's x2 value */
      margin: auto;
      text-align: center;
      position: relative;
      height: 6em;
    }
    
    .range-slider svg,
    .range-slider input[type="range"] {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    
    input[type="number"] {
      border: 1px solid #ddd;
      text-align: center;
      font-size: 1.6em;
    }
    
    input[type="number"]:invalid,
    input[type="number"]:out-of-range {
      border: 2px solid #ff6347;
    }
    
    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
    }
    
    input[type="range"]:focus {
      outline: none;
    }
    
    input[type="range"]:focus::-webkit-slider-runnable-track {
      background: #2497e3;
    }
    
    input[type="range"]:focus::-ms-fill-lower {
      background: #2497e3;
    }
    
    input[type="range"]:focus::-ms-fill-upper {
      background: #2497e3;
    }
    
    input[type="range"]::-webkit-slider-runnable-track {
      width: 100%;
      height: 5px;
      cursor: pointer;
      animate: 0.2s;
      background: #2497e3;
      border-radius: 1px;
      box-shadow: none;
      border: 0;
    }
    
    input[type="range"]::-webkit-slider-thumb {
      z-index: 2;
      position: relative;
      box-shadow: 0px 0px 0px #000;
      border: 1px solid #2497e3;
      height: 18px;
      width: 18px;
      border-radius: 25px;
      background: #a1d0ff;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      margin-top: -7px;
    }
    
    input[type="range"]::-moz-range-track {
      width: 100%;
      height: 5px;
      cursor: pointer;
      animate: 0.2s;
      background: #2497e3;
      border-radius: 1px;
      box-shadow: none;
      border: 0;
    }
    
    input[type="range"]::-moz-range-thumb {
      z-index: 2;
      position: relative;
      box-shadow: 0px 0px 0px #000;
      border: 1px solid #2497e3;
      height: 18px;
      width: 18px;
      border-radius: 25px;
      background: #a1d0ff;
      cursor: pointer;
    }
    
    input[type="range"]::-ms-track {
      width: 100%;
      height: 5px;
      cursor: pointer;
      animate: 0.2s;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }
    
    input[type="range"]::-ms-fill-lower,
    input[type="range"]::-ms-fill-upper {
      background: #2497e3;
      border-radius: 1px;
      box-shadow: none;
      border: 0;
    }
    
    input[type="range"]::-ms-thumb {
      z-index: 2;
      position: relative;
      box-shadow: 0px 0px 0px #000;
      border: 1px solid #2497e3;
      height: 18px;
      width: 18px;
      border-radius: 25px;
      background: #a1d0ff;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div >
    <span>from <input type="number" value="25000" min="0" max="100000" step="500"> to <input type="number" value="75000" min="0" max="100000" step="500"></span>
    <input value="25000" min="0" max="100000" step="500" type="range">
    <input value="50000" min="0" max="100000" step="500" type="range">
    <svg width="100%" height="24">
        <line x1="4" y1="0" x2="480" y2="0" stroke="#444" stroke-width="12" stroke-dasharray="1 28"></line>
    </svg>
  </div>
  <script>
    (function() {
      const parent = document.querySelector('.range-slider');

      if (!parent) {
        return;
      }

      const rangeS = parent.querySelectorAll('input[type="range"]'),
        numberS = parent.querySelectorAll('input[type="number"]');

      rangeS.forEach((el) => {
        el.oninput = () => {
          let slide1 = parseFloat(rangeS[0].value),
            slide2 = parseFloat(rangeS[1].value);

          if (slide1 > slide2) {
            [slide1, slide2] = [slide2, slide1];
          }

          numberS[0].value = slide1;
          numberS[1].value = slide2;
        }
      });

      numberS.forEach((el) => {
        el.oninput = () => {
          let number1 = parseFloat(numberS[0].value),
            number2 = parseFloat(numberS[1].value);

          if (number1 > number2) {
            let tmp = number1;
            numberS[0].value = number2;
            numberS[1].value = tmp;
          }

          rangeS[0].value = number1;
          rangeS[1].value = number2;
        }
      });
    })();
  </script>
</body>

</html>
CodePudding user response：
Unfortunately you can't fix that error