fix(ui5-range-slider): fire input event with correct values after swapping

packages/main/src/RangeSlider.ts

@@ -217,6 +217,13 @@ class RangeSlider extends SliderBase {
 	 *
 	 */
 	onBeforeRendering() {
+		if (this.startValue > this.endValue) {
+			const affectedValue = this._valueAffected === "startValue" ? "endValue" : "startValue";
+
+			this._swapValues();
+			this._setAffectedValue(affectedValue);
+		}
+
 		if (!this.isCurrentStateOutdated()) {
 			return;
 		}
@@ -311,8 +318,6 @@ class RangeSlider extends SliderBase {
 	*/
 	_onkeyup() {
 		super._onkeyup();
-
-		this._swapValues();
 		this._setAffectedValue(undefined);
 	}
 
@@ -535,7 +540,6 @@ class RangeSlider extends SliderBase {
 	}
 
 	_handleUp() {
-		this._swapValues();
 		this._setAffectedValueByFocusedElement();
 		this._setAffectedValue(undefined);
 
@@ -784,6 +788,9 @@ class RangeSlider extends SliderBase {
 	 */
 	_swapValues() {
 		const affectedValue = this._valueAffected;
+		if (!affectedValue) {
+			return;
+		}
 
 		if (affectedValue === "startValue" && this.startValue > this.endValue) {
 			const prevEndValue = this.endValue;
@@ -802,6 +809,9 @@ class RangeSlider extends SliderBase {
 			this._setValuesAreReversed();
 			this.focusInnerElement();
 		}
+
+		this._updateHandlesAndRange(this[affectedValue]);
+		this.syncUIAndState();
 	}
 
 	/**

packages/main/test/pages/RangeSlider.html

@@ -56,7 +56,14 @@ <h2>Event Testing Slider</h2>
 				<span>endValue in the change event: </span>
 				<span id="change-event-endValue"></span>
 			</div>
-
+			<div>
+				<span>startValue in the input event: </span>
+				<span id="input-event-startValue"></span>
+			</div>
+			<div>
+				<span>endValue in the input event: </span>
+				<span id="input-event-endValue"></span>
+			</div>
 			<h2>Event Testing Result Slider</h2>
 			<ui5-range-slider id="test-result-slider" start-value="1" end-value="2"></ui5-range-slider>
 		</section>
@@ -76,7 +83,11 @@ <h2>Event Testing Result Slider</h2>
 			eventTargetSlider.addEventListener("ui5-change", (e) => {
 				document.getElementById("change-event-startValue").innerText = e.target.startValue;
 				document.getElementById("change-event-endValue").innerText = e.target.endValue;
+			});
 
+			eventTargetSlider.addEventListener("ui5-input", (e) => {
+				document.getElementById("input-event-startValue").innerText = e.target.startValue;
+				document.getElementById("input-event-endValue").innerText = e.target.endValue;
 			});
 		</script>
 	</body>

packages/main/test/specs/RangeSlider.spec.js

@@ -313,6 +313,22 @@ describe("Testing events", () => {
 		assert.strictEqual(changeEventEndValue, "4", "Values are swapped prior to the firing of change event");
 	});
 
+	it("Should fire input event with correctly swiped values", async () => {
+		await browser.url(`test/pages/RangeSlider.html`);
+
+		const rangeSlider = await browser.$("#test-slider");
+		const firstHandle = await rangeSlider.shadow$(".ui5-slider-handle--start");
+
+		await rangeSlider.setProperty("endValue", 3);
+		await firstHandle.dragAndDrop({ x: 300, y: 1 });
+
+		const inputEventStartValue = await browser.execute(() => document.querySelector("#input-event-startValue").innerText);
+		const inputEventEndValue = await browser.execute(() => document.querySelector("#input-event-endValue").innerText);
+
+		assert.strictEqual(inputEventStartValue, "3", "The input event is fired with the correct values");
+		assert.strictEqual(inputEventEndValue, "4", "The input event is fired with the correct values");
+	});
+
 	it("Should not fire change event after user interaction is finished if the current value is the same as the one at the start of the action", async () => {
 		await browser.url(`test/pages/RangeSlider.html`);