How to Change value of input after page loads?

Question

I have used a range picker (Progress bar) to get measurements from the customers. I have set it's limit from 1 to 50 so it takes 1 value by default if user do not select it and user can add product to the cart without selecting range picker. Is there any way that we can change by default value on page load with javascript (No jQuery) to something that does not allow user to add product to the cart.

Link: https://cutt.ly/nrB4PAR

I am using this code now but it's not working. I want value to be null.

<script type="text/javascript" language="javascript">
    debugger;

    var range_val = document.getElementById("tmcp_range_1").value;
    if (range_val == 1)
        {
         document.getElementById("tmcp_range_1").value = "";
        }
    
</script>

UPDATED:

Answer 1

I'm not sure I really understand why you need this, but you have to put that code in a function, then call an event listener.

function changeVal() {
  var range_val = document.getElementById("tmcp_range_1").value;
  if (range_val == 1) {
    document.getElementById("tmcp_range_1").value = "22";
  }
}

window.addEventListner("load", changeVal);

Answer 2

Updating the input value after DOM loads will change the value.

function updateVal() {
    var range_val = document.getElementById("tmcp_range_1").value;
    if (range_val == 1) {
        document.getElementById("tmcp_range_1").value = "22";
    }
}
window.addEventListner("load", updateVal);

And also you need to change noUiSlider logic to update UI. Ref link https://refreshless.com/nouislider/slider-read-write/