fix(ui5-slider): fire uphandler when mouse leaves the window (#12192)

FIXES: #11460

Author: MapTo0

packages/main/src/SliderBase.ts

@@ -169,6 +169,7 @@ abstract class SliderBase extends UI5Element {
 	_resizeHandler: ResizeObserverCallback;
 	_moveHandler: (e: TouchEvent | MouseEvent) => void;
 	_upHandler: (e: TouchEvent | MouseEvent) => void;
+	_windowMouseoutHandler: (e: MouseEvent) => void;
 	_stateStorage: StateStorage;
 	notResized = false;
 	_isUserInteraction = false;
@@ -189,6 +190,11 @@ abstract class SliderBase extends UI5Element {
 		this._resizeHandler = this._handleResize.bind(this);
 		this._moveHandler = this._handleMove.bind(this);
 		this._upHandler = this._handleUp.bind(this);
+		this._windowMouseoutHandler = (e: MouseEvent) => {
+			if (e.relatedTarget === document.documentElement) {
+				this.handleUpBase();
+			}
+		};
 
 		this._stateStorage = {
 			step: undefined,
@@ -430,6 +436,7 @@ abstract class SliderBase extends UI5Element {
 
 		window.addEventListener("mouseup", this._upHandler);
 		window.addEventListener("touchend", this._upHandler);
+		window.addEventListener("mouseout", this._windowMouseoutHandler);
 		// Only allow one type of move event to be listened to (the first one registered after the down event)
 		if (supportsTouch() && e instanceof TouchEvent) {
 			window.addEventListener("touchmove", this._moveHandler);
@@ -463,6 +470,7 @@ abstract class SliderBase extends UI5Element {
 	handleUpBase() {
 		window.removeEventListener("mouseup", this._upHandler);
 		window.removeEventListener("touchend", this._upHandler);
+		window.removeEventListener("mouseout", this._windowMouseoutHandler);
 		// Only one of the following was attached, but it's ok to remove both as there is no error
 		window.removeEventListener("mousemove", this._moveHandler);
 		window.removeEventListener("touchmove", this._moveHandler);