Right now my price slider works great on chrome, safari and edge, but on firefox, even though I’ve made specific adjustments, one of the sliders appears to be under the other one, causing it to be useless.Firefox, Chrome

I’ve tried different solutions but none have worked, including changing the z-index and so forth. I read that firefox handles overlapping inputs differently, so I’m wondering if there’s a solution?
HTML:

<div class="range-slider" id="range-slider">
                <span class="rangeValues" id="range-values"></span>
                <input value="0" min="0" max="100" step="1" type="range" class="range-input">
                <input value="100" min="0" max="100" step="1" type="range" class="range-input">
              </div>

CSS:

.range-slider {
  width: 150px;
  text-align: center;
  position: relative;
  padding-bottom: 20px;
  background-color: transparent;
}

.range-input {
  border-radius: 100vh;
}

.range-slider .rangeValues {
  display: block;
  background-color: transparent;
  color: var(--text-color);
  border-radius: 10px;
  padding: 20px;
  padding-top: 5px;
  font-size: 18px;
  font-weight: 500;
}

input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none; /* Firefox compatibility */
  appearance: none; /* General compatibility */
  border: none;
  width: 100%; /* Ensure the range fills the slider */
  position: absolute;
  left: 0;
  background-color: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: var(--text-color);
  border: none;
  border-radius: 100vh;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 18px;
  width: 18px;
  border-radius: 100vh;
  background: var(--hover-color);
  margin-top: -6.5px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* Firefox track styling */
input[type="range"]::-moz-range-track {
  height: 5px; /* Match WebKit track height */
  background: var(--text-color);
  border: none;
  border-radius: 100vh;
}

/* Firefox thumb styling */
input[type="range"]::-moz-range-thumb {
  border: none;
  height: 18px;
  width: 18px;
  border-radius: 100vh;
  background: var(--hover-color);
  cursor: pointer;
  position: relative;
  z-index: 1;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]:focus::-webkit-slider-runnable-track,
input[type="range"]:focus::-moz-range-track {
  background: #ccc;
}