How can I fix Firefox input range problem?

Question

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 class="range-slider">
    <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>

Try this approach: [HTML5: Slider with two inputs possible?](https://stackoverflow.com/questions/4753946/html5-slider-with-two-inputs-possible#70561454). Actually I won't say it's a firefox bug since range sliders with2 handles are currently not natively supported by html. Stacking 2 fields on top of each other is pretty questionable especially in terms **accessibility** — herrstrietzel, Oct 21 '22 at 13:32

score -1 · Answer 1 · answered Oct 21 '22 at 09:33

-1

Unfortunately you can't fix that error.

answered Oct 21 '22 at 09:33

Piotrek

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 24 '22 at 11:26

jakub · Answer 2 · 2022-10-21T09:45:51.850

not possible :(
if you want make something similar change position absolute to relative for 2 sliders

firefox is broken

I think I know what you wanted to do and
the best way to remove this and leave only prices inputs

or (for 2 ranges) (when pax use firefox)

if (navigator.userAgent.indexOf("Firefox") != -1) {
   document.querySelector('input[type="range"]').style.position = "relavite";
}

input[type="range"] {
  position: relative;
...

How can I fix Firefox input range problem?

2 Answers2