mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-31 12:20:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve UX of non-interactive slider (#7814)

Browse Source 
* 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>
This commit is contained in:
Dmytro Drach 2024-03-25 17:10:10 +02:00 committed by GitHub
parent ff6bf3ec8f
commit f7df92f3f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 46 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/weak-shoes-judge.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/slider": minor
"gradio": minor
---
feat:Improve UX of non-interactive slider

35
js/slider/Index.svelte
View File

@ -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;

14
js/slider/Slider.stories.svelte
View File

@ -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
}}
/>