gr.Number() max/min limit

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## New Features:
 
+- Min and max value for gr.Number by [@artegoser](https://github.com/artegoser) and [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3991](https://github.com/gradio-app/gradio/pull/3991)
 - The `gr.UploadButton` component now supports the `variant` and `interactive` parameters by [@abidlabs](https://github.com/abidlabs) in [PR 4436](https://github.com/gradio-app/gradio/pull/4436). 
 
 ## Bug Fixes:

demo/blocks_form/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_form"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    error_box = gr.Textbox(label=\"Error\", visible=False)\n", "\n", "    name_box = gr.Textbox(label=\"Name\")\n", "    age_box = gr.Number(label=\"Age\")\n", "    symptoms_box = gr.CheckboxGroup([\"Cough\", \"Fever\", \"Runny Nose\"])\n", "    submit_btn = gr.Button(\"Submit\")\n", "\n", "    with gr.Column(visible=False) as output_col:\n", "        diagnosis_box = gr.Textbox(label=\"Diagnosis\")\n", "        patient_summary_box = gr.Textbox(label=\"Patient Summary\")\n", "\n", "    def submit(name, age, symptoms):\n", "        if len(name) == 0:\n", "            return {error_box: gr.update(value=\"Enter name\", visible=True)}\n", "        if age < 0 or age > 200:\n", "            return {error_box: gr.update(value=\"Enter valid age\", visible=True)}\n", "        return {\n", "            output_col: gr.update(visible=True),\n", "            diagnosis_box: \"covid\" if \"Cough\" in symptoms else \"flu\",\n", "            patient_summary_box: f\"{name}, {age} y/o\"\n", "        }\n", "\n", "    submit_btn.click(\n", "        submit,\n", "        [name_box, age_box, symptoms_box],\n", "        [error_box, diagnosis_box, patient_summary_box, output_col],\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_form"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    error_box = gr.Textbox(label=\"Error\", visible=False)\n", "\n", "    name_box = gr.Textbox(label=\"Name\")\n", "    age_box = gr.Number(label=\"Age\", min=0, max=100)\n", "    symptoms_box = gr.CheckboxGroup([\"Cough\", \"Fever\", \"Runny Nose\"])\n", "    submit_btn = gr.Button(\"Submit\")\n", "\n", "    with gr.Column(visible=False) as output_col:\n", "        diagnosis_box = gr.Textbox(label=\"Diagnosis\")\n", "        patient_summary_box = gr.Textbox(label=\"Patient Summary\")\n", "\n", "    def submit(name, age, symptoms):\n", "        if len(name) == 0:\n", "            return {error_box: gr.update(value=\"Enter name\", visible=True)}\n", "        return {\n", "            output_col: gr.update(visible=True),\n", "            diagnosis_box: \"covid\" if \"Cough\" in symptoms else \"flu\",\n", "            patient_summary_box: f\"{name}, {age} y/o\",\n", "        }\n", "\n", "    submit_btn.click(\n", "        submit,\n", "        [name_box, age_box, symptoms_box],\n", "        [error_box, diagnosis_box, patient_summary_box, output_col],\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/blocks_form/run.py

@@ -4,7 +4,7 @@
     error_box = gr.Textbox(label="Error", visible=False)
 
     name_box = gr.Textbox(label="Name")
-    age_box = gr.Number(label="Age")
+    age_box = gr.Number(label="Age", min=0, max=100)
     symptoms_box = gr.CheckboxGroup(["Cough", "Fever", "Runny Nose"])
     submit_btn = gr.Button("Submit")
 
@@ -15,12 +15,10 @@
     def submit(name, age, symptoms):
         if len(name) == 0:
             return {error_box: gr.update(value="Enter name", visible=True)}
-        if age < 0 or age > 200:
-            return {error_box: gr.update(value="Enter valid age", visible=True)}
         return {
             output_col: gr.update(visible=True),
             diagnosis_box: "covid" if "Cough" in symptoms else "flu",
-            patient_summary_box: f"{name}, {age} y/o"
+            patient_summary_box: f"{name}, {age} y/o",
         }
 
     submit_btn.click(
@@ -30,4 +28,4 @@ def submit(name, age, symptoms):
     )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()

gradio/components.py

@@ -72,6 +72,7 @@
 )
 from gradio.interpretation import NeighborInterpretable, TokenInterpretable
 from gradio.layouts import Column, Form, Row
+from gradio.exceptions import Error
 
 if TYPE_CHECKING:
     from typing import TypedDict
@@ -656,6 +657,8 @@ def __init__(
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         precision: int | None = None,
+        min: float | int = float("-inf"),
+        max: float | int = float("inf"),
         **kwargs,
     ):
         """
@@ -670,8 +673,13 @@ def __init__(
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             precision: Precision to round input/output to. If set to 0, will round to nearest integer and convert type to int. If None, no rounding happens.
+            min: Minimum value. Only applied when component is used as an input. If a user provides a smaller value, a gr.Error exception is raised by the backend.
+            max: Maximum value. Only applied when component is used as an input. If a user provides a larger value, a gr.Error exception is raised by the backend.
         """
         self.precision = precision
+        self.min = min
+        self.max = max
+
         IOComponent.__init__(
             self,
             label=label,
@@ -710,12 +718,16 @@ def _round_to_precision(num: float | int, precision: int | None) -> float | int:
     def get_config(self):
         return {
             "value": self.value,
+            "max": self.max,
+            "min": self.min,
             **IOComponent.get_config(self),
         }
 
     @staticmethod
     def update(
         value: float | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE,
+        max: float | int | None = None,
+        min: float | int | None = None,
         label: str | None = None,
         show_label: bool | None = None,
         interactive: bool | None = None,
@@ -726,6 +738,8 @@ def update(
             "show_label": show_label,
             "visible": visible,
             "value": value,
+            "max": max,
+            "min": min,
             "interactive": interactive,
             "__type__": "update",
         }
@@ -739,6 +753,10 @@ def preprocess(self, x: float | None) -> float | None:
         """
         if x is None:
             return None
+        elif self.min != None and x < self.min:
+            raise Error(f"Value {x} is less than minimum value {self.min}.")
+        elif self.max != None and x > self.max:
+            raise Error(f"Value {x} is greater than maximum value {self.max}.")
         return self._round_to_precision(x, self.precision)
 
     def postprocess(self, y: float | None) -> float | None:

gradio/themes/base.py

@@ -1421,7 +1421,7 @@ def set(
             self, "error_border_color", colors.red.c200
         )
         self.error_border_color_dark = error_border_color_dark or getattr(
-            self, "error_border_color_dark", "*border_color_primary"
+            self, "error_border_color_dark", colors.red.c200
         )
         self.error_border_width = error_border_width or getattr(
             self, "error_border_width", "1px"

js/app/src/components/Number/Number.svelte

@@ -13,6 +13,8 @@
 	export let style: Styles = {};
 	export let value: number = 0;
 	export let show_label: boolean;
+	export let max: number | undefined = undefined;
+	export let min: number | undefined = undefined;
 
 	export let loading_status: LoadingStatus;
 	export let mode: "static" | "dynamic";
@@ -29,6 +31,8 @@
 
 	<Number
 		bind:value
+		bind:max
+		bind:min
 		bind:value_is_output
 		{label}
 		{info}

js/app/test/mocks/theme.css

@@ -241,6 +241,7 @@
 	--button-small-text-weight: 400;
 	--button-transition: none;
 }
+
 .dark {
 	--color-accent-soft: var(--neutral-900);
 	--background-fill-primary: var(--neutral-950);
@@ -297,7 +298,7 @@
 	--checkbox-label-text-color: var(--body-text-color);
 	--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
 	--error-background-fill: var(--background-fill-primary);
-	--error-border-color: var(--border-color-primary);
+	--error-border-color: #fecaca;
 	--error-border-width: var(--error-border-width);
 	--error-text-color: #ef4444;
 	--input-background-fill: var(--neutral-800);

js/form/src/Number.svelte

@@ -3,6 +3,8 @@
 	import { BlockTitle } from "@gradio/atoms";
 
 	export let value: number = 0;
+	export let max: number | undefined = undefined;
+	export let min: number | undefined = undefined;
 	export let value_is_output: boolean = false;
 	export let disabled: boolean = false;
 	export let label: string;
@@ -31,7 +33,6 @@
 
 	async function handle_keypress(e: KeyboardEvent) {
 		await tick();
-
 		if (e.key === "Enter") {
 			e.preventDefault();
 			dispatch("submit");
@@ -49,6 +50,8 @@
 	<input
 		type="number"
 		bind:value
+		{max}
+		{min}
 		on:keypress={handle_keypress}
 		on:blur={handle_blur}
 		{disabled}
@@ -84,4 +87,8 @@
 	input::placeholder {
 		color: var(--input-placeholder-color);
 	}
+
+	input:out-of-range {
+		border: var(--input-border-width) solid var(--error-border-color);
+	}
 </style>

test/test_components.py

@@ -207,6 +207,8 @@ def test_component_functions(self):
             "name": "number",
             "show_label": True,
             "label": None,
+            "max": float("inf"),
+            "min": float("-inf"),
             "style": {},
             "elem_id": "num",
             "elem_classes": ["first"],
@@ -252,6 +254,8 @@ def test_component_functions_integer(self):
             "name": "number",
             "show_label": True,
             "label": None,
+            "max": float("inf"),
+            "min": float("-inf"),
             "style": {},
             "elem_id": None,
             "elem_classes": None,