JS, Problem with the draggable half circle being able to go inside the bar

<html>
<style>
#bar {
  position: fixed; /* Fixed position to stay in place on scroll */
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px; /* Initial width of the bar */
  background-color: #f1f1f1; /* Background of the bar */
  border-right: 1px solid #d3d3d3; /* Border of the bar */
  z-index: 9;


  
}

#handle {
  width: 100px; /* Diameter of the handle circle */
  height: 100px; /* Height of the handle circle */
  background-color: #2196F3;
  border-radius: 50%; /* Make it round */
  position: absolute; /* Absolute position within the bar div */
  top: 50%; /* Center it vertically */
  right: -50px; /* Align to the right of the bar */
  transform: translateY(-50%); /* Adjust vertical position */
  cursor: pointer; /* Change cursor to indicate it's draggable */
  z-index: 10;
  clip-path: inset(0 0 0 50%); /* Clip left half of the circle */
}
</style>
<body>



<div id="bar">
  <!-- This is the draggable handle -->
  <div id="handle"></div>
</div>

<script>
// Make the handle draggable
dragElement(document.getElementById("handle"));

function dragElement(elmnt) {
  var startPosX = 0, currentPosX = 0;
  var maxBarWidth = window.innerWidth  - (elmnt.offsetWidth /16); // Tarayıcı penceresinin genişliğini kullan , Set the maximum width for the bar.

  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    startPosX = e.clientX;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
  e = e || window.event;
  e.preventDefault();
  currentPosX = e.clientX - startPosX;
  startPosX = e.clientX;
  var bar = document.getElementById("bar");
  var newWidth = bar.offsetWidth + currentPosX;

  // Define the minimum width to keep the handle from entering the bar area
  var minBarWidth = 3; // This is the initial width of the bar

  // Define the maximum width as a percentage of the window's width
  var maxBarWidth = window.innerWidth- elmnt.offsetWidth / 16;

  // Restrict the width within the minimum and maximum bounds
  newWidth = Math.max(minBarWidth, Math.min(newWidth, maxBarWidth));

  // Set the new width
  bar.style.width = newWidth + "px";

  // If the new width is at the minimum, keep the handle from going into the bar
  if(newWidth <= minBarWidth) {
    elmnt.style.right = "0px"; // This keeps the handle from entering the bar area
  } else {
    elmnt.style.right = "-50px"; // This is for when the handle is not at the minimum width
  }
}

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

</body>
</html>

Hello friends, when I initially try to pull the semicircle from its end to the left, it goes into the bar in a way I don’t want and appears there. I actually have minBarWidth set to 3 which is the bar width but still this didn’t solve the problem

Undesired condition:

enter image description here

view that should be valid even if forced to move to the left:enter image description here