Проблема с возможностью перетаскиваемого полукруга войти внутрь панели

// 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;
  }
}

#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 */
}

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