Tengo dos controles deslizantes de rango que muestran el valor en la etiqueta cuando se deslizan. También se ajustan entre sí para evitar un rango hacia atrás. Funciona en FireFox {99.0.1 (64 bits)} (Mac OS) pero no en Safari{15.4.1} (iPhone)

 <h6>Age range you prefer</h6> <label for="Youngest" id="youngestlabel" class="form-label">Youngest Age: (<?php if(!empty($UserLookingForYoungest)){echo $UserLookingForYoungest;}else{echo "18";}?>)</label> <input type="range" class="form-range" id="Youngest" name="Youngest" min="18" max="80" step="1" value="<?php if(!empty($UserLookingForYoungest)){echo $UserLookingForYoungest;}else{echo "18";}?>" onchange="UpdateOldest(this.value)" onmousemove="document.getElementById('youngestlabel').innerHTML='Youngest Age: (' + this.value + ')';"> <br /> <label for="Oldest" id="oldestlabel" class="form-label">Oldest Age: (<?php if(!empty($UserLookingForOldest)){echo $UserLookingForOldest;}else{echo "80";}?>)</label> <input type="range" class="form-range" id="Oldest" name="Oldest" min="18" max="80" step="1" value="<?php if(!empty($UserLookingForOldest)){echo $UserLookingForOldest;}else{echo "80";}?>" onchange="UpdateYoungest(this.value)" onmousemove="document.getElementById('oldestlabel').innerHTML= 'Oldest Age: (' + this.value + ')';">

y el javascript:

 <script> function UpdateOldest(newvalue){ var OldestAge = document.getElementById('Oldest').value; if(newvalue >= OldestAge){ updateValue = parseInt(newvalue) + 1; document.getElementById("Oldest").value = updateValue; document.getElementById('oldestlabel').innerHTML= "Oldest Age: (" + updateValue + ")"; }}; function UpdateYoungest(newvalue){ var YoungestAge = document.getElementById('Youngest').value; if(newvalue <= YoungestAge){ updateValue = parseInt(newvalue) - 1; document.getElementById("Youngest").value = updateValue; document.getElementById('youngestlabel').innerHTML= "Youngest Age: (" + updateValue + ")"; }}; </script>

Entonces, ¿cuál es el trato con Safari y los controles deslizantes de rango?

¡Gracias!