Improve UX of non-interactive slider (#7814)

* Fix disabled slider appearance * add changeset * tweaks * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: pngwn <hello@pngwn.io>
gradio-app · Mar 25, 2024 · f7df92f · f7df92f
1 parent ff6bf3e
commit f7df92f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 9 deletions.
diff --git a/.changeset/weak-shoes-judge.md b/.changeset/weak-shoes-judge.md
@@ -0,0 +1,6 @@
+---
+"@gradio/slider": minor
+"gradio": minor
+---
+
+feat:Improve UX of non-interactive slider
diff --git a/js/slider/Index.svelte b/js/slider/Index.svelte
@@ -24,7 +24,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let minimum: number;
-	export let maximum: number;
+	export let maximum = 100;
 	export let step: number;
 	export let show_label: boolean;
 	export let interactive: boolean;
@@ -61,11 +61,10 @@
 		numberInput.addEventListener("input", setSliderRange);
 	}
 	function setSliderRange(): void {
-		rangeInput.style.backgroundSize =
-			((Number(rangeInput.value) - Number(rangeInput.min)) /
-				(Number(rangeInput.max) - Number(rangeInput.min))) *
-				100 +
-			"% 100%";
+		const dividend = Number(rangeInput.value) - Number(rangeInput.min);
+		const divisor = Number(rangeInput.max) - Number(rangeInput.min);
+		const h = divisor === 0 ? 0 : dividend / divisor;
+		rangeInput.style.backgroundSize = h * 100 + "% 100%";
 	}
 
 	$: disabled = !interactive;
@@ -130,6 +129,7 @@
 		display: flex;
 		justify-content: space-between;
 	}
+
 	input[type="number"] {
 		display: block;
 		position: relative;
@@ -145,6 +145,7 @@
 		line-height: var(--line-sm);
 		text-align: center;
 	}
+
 	input:disabled {
 		-webkit-text-fill-color: var(--body-text-color);
 		-webkit-opacity: 1;
@@ -194,6 +195,28 @@
 		background: var(--neutral-50);
 	}
 
+	input[type="range"][disabled] {
+		background: var(--body-text-color-subdued);
+	}
+
+	input[type="range"][disabled]::-webkit-slider-thumb {
+		cursor: not-allowed;
+		background-color: var(--body-text-color-subdued);
+	}
+
+	input[type="range"][disabled]::-moz-range-track {
+		cursor: not-allowed;
+		background-color: var(--body-text-color-subdued);
+	}
+
+	input[type="range"][disabled]::-webkit-slider-thumb:hover {
+		background-color: var(--body-text-color-subdued);
+	}
+
+	input[type="range"][disabled]::-moz-range-track:hover {
+		background-color: var(--body-text-color-subdued);
+	}
+
 	input[type="range"]::-webkit-slider-runnable-track {
 		-webkit-appearance: none;
 		box-shadow: none;

diff --git a/js/slider/Slider.stories.svelte b/js/slider/Slider.stories.svelte
@@ -6,11 +6,11 @@
 <Meta title="Components/Slider" component={Slider} />
 
 <Template let:args>
-	<Slider {...args} />
+	<Slider interactive={true} {...args} />
 </Template>
 
 <Story
-	name="Slider with min 0 and max 100"
+	name="Slider with min and max"
 	args={{
 		minimum: 0,
 		maximum: 100
@@ -32,10 +32,18 @@
 />
 
 <Story
-	name="Slider with min 0 and max 100 and default value of 50"
+	name="Slider with min, max, and default value"
 	args={{
 		value: 50,
 		minimum: 0,
 		maximum: 100
 	}}
 />
+
+<Story
+	name="Non-interactive Slider"
+	args={{
+		value: 30,
+		interactive: false
+	}}
+/>