I have two range sliders that display the value in the label when they slide. They also adjust each other to prevent a backwards range. It works in FireFox {99.0.1 (64-bit)} (Mac OS) but not in 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 + ')';">

and the 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>

So, whats the deal with Safari and range sliders?

Thanks!