Trigger event when Slider number input is released (#3589)

* Add event

* Add unit test

* CHANGELOG

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ## New Features:
 
-No changes to highlight.
+- Trigger the release event when Slider number input is released or unfocused  by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3589](https://github.com/gradio-app/gradio/pull/3589)   
 
 ## Bug Fixes:
 

ui/packages/form/src/Range.svelte

@@ -24,6 +24,7 @@
 
 	$: dispatch("change", value);
 	const clamp = () => {
+		dispatch("release", value);
 		value = Math.min(Math.max(value, minimum), maximum);
 	};
 </script>
@@ -34,6 +35,7 @@
 			<BlockTitle {show_label} {info}>{label}</BlockTitle>
 		</label>
 		<input
+			data-testid="number-input"
 			type="number"
 			bind:value
 			min={minimum}
@@ -41,6 +43,7 @@
 			on:blur={clamp}
 			{step}
 			{disabled}
+			on:mouseup={handle_release}
 		/>
 	</div>
 </div>

ui/packages/form/src/Range.test.ts

@@ -0,0 +1,29 @@
+import { test, describe, afterEach, vi, expect } from "vitest";
+import { cleanup, render, fireEvent } from "@gradio/tootils";
+
+import Range from "./Range.svelte";
+
+describe("Range", () => {
+	afterEach(() => cleanup());
+
+	test("Release event called on blur and mouseUp", () => {
+		const results = render(Range, {
+			label: "range",
+			show_label: true,
+			value: 1,
+			minimum: 0,
+			maximum: 10
+		});
+
+		const numberInput = results.getAllByTestId("number-input")[0];
+		const mock = vi.fn();
+		results.component.$on("release", mock);
+
+		fireEvent.mouseUp(numberInput);
+
+		expect(mock).toHaveBeenCalledOnce();
+
+		fireEvent.blur(numberInput);
+		expect(mock).toHaveBeenCalledTimes(2);
+	});
+});