Repository: gradio-app/gradio

Issue:
Add option to disable reset button in `gr.Slider`
- [x] I have searched to see if a similar issue already exists.

I notice that a reset button has been added to slider components. That is nice, but what would be even better if you could add reset buttons for other components as well. For my workflow I specifically need reset buttons for (single-select) dropdown components and radio components. 

**Is your feature request related to a problem? Please describe.**  
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

**Describe the solution you'd like**  
A clear and concise description of what you want to happen.

**Additional context**  
Add any other context or screenshots about the feature request here.

Discussion:
@abidlabs: Hi @JackismyShephard I don't think we'll add these buttons as they would clutter the UI too much, but I think this would be a great case for a custom component!

tldr: we've made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. 

Here's an example of a Gradio custom component: https://github.com/PhyscalX/gradio-image-prompter -- it lets you upload images and process points or draw boxes on top of the image.

If you'd like to create your own, you could template off of the dropdown and radio components, we've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help.@JackismyShephard: @abidlabs I actually agree with you. Could you then perhaps make it possible to disable the buttons on the slider components (via an initialization option) because they also clutter and I need a global reset button anyways. I imagine other people might be in the same situation as me. @abidlabs: We could probably do that, let me rename the issue to reflect that@abidlabs: Btw if you'd like to make a PR to that effect (adding a `show_reset_button` parameter to `gr.Slider`, happy to review)@JackismyShephard: @abidlabs I think I could try and take a swing at that. I probably need some pointers from you though . Primarily in terms of where in your code base I need to make changes @abidlabs: Hi @JackismyShephard if you are still interested, the relevant sections of the code would be:

* [here in the frontend](https://github.com/gradio-app/gradio/blob/2afcad80abd489111e47cf586a2a8221cc3dc9b6/js/slider/Index.svelte#L127) 
* [here in the backend](https://github.com/gradio-app/gradio/blob/6f95286337459efbccb95c9cfac63355669df9ee/gradio/components/slider.py#L30)@amanchauhan11: Hi @abidlabs if no one else is working on this, I would like to raise a PR for it.@abidlabs: Sure feel free to open a PR @amanchauhan11 @JackismyShephard: @amanchauhan11 very nice !

Solution patch:
diff --git a/.changeset/silly-jeans-suffer.md b/.changeset/silly-jeans-suffer.md
new file mode 100644
index 000000000..356955854
--- /dev/null
+++ b/.changeset/silly-jeans-suffer.md
@@ -0,0 +1,6 @@
+---
+"@gradio/slider": minor
+"gradio": minor
+---
+
+feat:Add `show_reset_button` to `gr.slider` initialization
diff --git a/gradio/components/slider.py b/gradio/components/slider.py
index 748fd041a..59ae3c468 100644
--- a/gradio/components/slider.py
+++ b/gradio/components/slider.py
@@ -49,6 +49,7 @@ class Slider(FormComponent):
         render: bool = True,
         key: int | str | None = None,
         randomize: bool = False,
+        show_reset_button: bool = True,
     ):
         """
         Parameters:
@@ -71,6 +72,7 @@ class Slider(FormComponent):
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
             randomize: If True, the value of the slider when the app loads is taken uniformly at random from the range given by the minimum and maximum.
+            show_reset_button: if False, will hide button to reset slider to default value.
         """
         self.minimum = minimum
         self.maximum = maximum
@@ -80,6 +82,7 @@ class Slider(FormComponent):
             self.step = 10**power
         else:
             self.step = step
+        self.show_reset_button = show_reset_button
         if randomize:
             value = self.get_random_value
         super().__init__(
diff --git a/js/slider/Index.svelte b/js/slider/Index.svelte
index 3fe952c91..15f08553f 100644
--- a/js/slider/Index.svelte
+++ b/js/slider/Index.svelte
@@ -34,6 +34,7 @@
 	export let loading_status: LoadingStatus;
 	export let value_is_output = false;
 	export let root: string;
+	export let show_reset_button: boolean;
 
 	let range_input: HTMLInputElement;
 	let number_input: HTMLInputElement;
@@ -124,14 +125,17 @@
 					{disabled}
 					on:pointerup={handle_release}
 				/>
-				<button
-					class="reset-button"
-					on:click={reset_value}
-					{disabled}
-					aria-label="Reset to default value"
-				>
-					↺
-				</button>
+				{#if show_reset_button}
+					<button
+						class="reset-button"
+						on:click={reset_value}
+						{disabled}
+						aria-label="Reset to default value"
+						data-testid="reset-button"
+					>
+						↺
+					</button>
+				{/if}
 			</div>
 		</div>
 
diff --git a/js/slider/Slider.component.spec.ts b/js/slider/Slider.component.spec.ts
index cc9225dd9..182ee4e26 100644
--- a/js/slider/Slider.component.spec.ts
+++ b/js/slider/Slider.component.spec.ts
@@ -60,6 +60,25 @@ test("Slider respects show_label", async ({ mount, page }) => {
 	await expect(component.getByTestId("block-title")).toBeHidden();
 });
 
+test("Slider respects show_reset_button", async ({ mount, page }) => {
+	const component = await mount(Slider, {
+		props: {
+			value: 3,
+			minimum: 0,
+			maximum: 10,
+			label: "My Slider",
+			show_reset_button: true,
+			step: 1,
+			interactive: true,
+			loading_status: loading_status,
+			gradio: {
+				dispatch() {}
+			}
+		}
+	});
+	await expect(component.getByTestId("reset-button")).toBeVisible();
+});
+
 test("Slider Maximum/Minimum values", async ({ mount, page }) => {
 	const component = await mount(Slider, {
 		props: {
diff --git a/js/slider/Slider.stories.svelte b/js/slider/Slider.stories.svelte
index e66838c72..8f253852c 100644
--- a/js/slider/Slider.stories.svelte
+++ b/js/slider/Slider.stories.svelte
@@ -50,3 +50,13 @@
 		interactive: false
 	}}
 />
+
+<Story
+	name="Slider with reset button hidden"
+	args={{
+		value: 50,
+		minimum: 10,
+		maximum: 100,
+		show_reset_button: false
+	}}
+/>


Test patch:
diff --git a/test/components/test_slider.py b/test/components/test_slider.py
index 869fcbd52..bb924628c 100644
--- a/test/components/test_slider.py
+++ b/test/components/test_slider.py
@@ -22,6 +22,7 @@ class TestSlider:
             "value": 15,
             "name": "slider",
             "show_label": True,
+            "show_reset_button": True,
             "label": "Slide Your Input",
             "container": True,
             "min_width": 160,