fix(ui5-slider): fire 'change' event on keyup (#10803)

* fix(ui5-slider): fire 'change' event on keyup

fixes: #10770

packages/main/cypress/specs/Slider.cy.tsx

@@ -0,0 +1,26 @@
+import Slider from "../../src/Slider.js";
+
+describe("General interactions", () => {
+	it("Fire change event on keyup", () => {
+		let changeCount = 0;
+		cy.mount(
+			<Slider min={0} max={20}></Slider>
+		);
+
+		cy.get("[ui5-slider]").then($slider => {
+			$slider[0].addEventListener("ui5-change", () => {
+				changeCount++;
+			});
+		});
+
+		// First 'change' event is fired when the slider is clicked
+		cy.get("[ui5-slider]").click();
+
+		// Second 'change' event is fired on keyboard interaction
+		cy.get("[ui5-slider]").realPress("ArrowRight");
+
+		cy.then(() => {
+			expect(changeCount).to.equal(2);
+		});
+	});
+});

packages/main/src/Slider.ts

@@ -264,6 +264,18 @@ class Slider extends SliderBase implements IFormInputElement {
 		this._valueOnInteractionStart = undefined;
 	}
 
+	_onkeyup(e: KeyboardEvent) {
+		const isActionKey = SliderBase._isActionKey(e);
+
+		this._onKeyupBase();
+
+		if (isActionKey && this._valueOnInteractionStart !== this.value) {
+			this.fireDecoratorEvent("change");
+		}
+
+		this._valueOnInteractionStart = this.value;
+	}
+
 	_onInputFocusOut(e: FocusEvent) {
 		const tooltipInput = this.shadowRoot!.querySelector("[ui5-input]") as Input;
 

packages/main/src/SliderTemplate.tsx

@@ -35,6 +35,7 @@ export function handles(this: Slider) {
 			<div class="ui5-slider-handle"
 				onFocusOut={this._onfocusout}
 				onFocusIn={this._onfocusin}
+				onKeyUp={this._onkeyup}
 				role="slider"
 				tabIndex={this._tabIndex}
 				aria-orientation="horizontal"