From b59c45160d64aac09d2e3791bbfa5b152626e1ca Mon Sep 17 00:00:00 2001
From: Dawood Khan <dawoodkhan82@gmail.com>
Date: Wed, 5 Oct 2022 14:30:40 -0400
Subject: [PATCH] Clamps values for typeable slider input when out of range
 (#2380)

* warning for slider type input

* fix value on blur

* remove unnecesary classes

* update changelog

* Update CHANGELOG.md
---
 CHANGELOG.md                      | 1 +
 ui/packages/form/src/Range.svelte | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ba67e66ac..87d390a29e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -53,6 +53,7 @@ No changes to highlight.
 * Copy changelog file in website docker by [@aliabd](https://github.com/aliabd) in [PR 2384](https://github.com/gradio-app/gradio/pull/2384)
 * Lets users provide a `gr.update()` dictionary even if post-processing is diabled [@abidlabs](https://github.com/abidlabs) in [PR 2385](https://github.com/gradio-app/gradio/pull/2385)
 * Fix bug where errors would cause apps run in reload mode to hang forever by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2394](https://github.com/gradio-app/gradio/pull/2394)
+* Fix bug where new typeable slider doesn't respect the minimum and maximum values [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 2380](https://github.com/gradio-app/gradio/pull/2380)
 
 ## Contributors Shoutout:
 No changes to highlight.
diff --git a/ui/packages/form/src/Range.svelte b/ui/packages/form/src/Range.svelte
index 5aa9602d9a..4b586bf8da 100644
--- a/ui/packages/form/src/Range.svelte
+++ b/ui/packages/form/src/Range.svelte
@@ -21,6 +21,7 @@
 	const dispatch = createEventDispatcher<{ change: number }>();
 
 	$: dispatch("change", value);
+	const clamp = () => (value = Math.min(Math.max(value, minimum), maximum));
 </script>
 
 <div class="w-full flex flex-col ">
@@ -34,6 +35,7 @@
 			bind:value
 			min={minimum}
 			max={maximum}
+			on:blur={clamp}
 			{step}
 			{disabled}
 		/>