Improve UX of non-interactive slider #7814
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🪼 branch checks and previews
Install Gradio from this PR pip install https://gradio-builds.s3.amazonaws.com/219f2f4a5af408ed3733c3841670242944a79d64/gradio-4.22.0-py3-none-any.whlInstall Gradio Python Client from this PR pip install "gradio-client @ git+https://github.com/gradio-app/gradio@219f2f4a5af408ed3733c3841670242944a79d64#subdirectory=client/python" |
|
@Pythongor Can you please add a comparison screenshot after the fix here, so we can take a look without running the code. |
🦄 change detectedThis Pull Request includes changes to the following packages.
With the following changelog entry.
Maintainers or the PR author can modify the PR title to modify this entry.
|
|
Looks great! 
|
pngwn
changed the title
|
Fixed the stories and also fixed a small bug that mean the background size wasn't being coloured in when the max was not set. |
pngwn
reviewed
Mar 25, 2024
Comment on lines
+64
to
+67
| 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%"; |
There was a problem hiding this comment.
Just added some checks so we don't get infinity.
pngwn
reviewed
Mar 25, 2024
| @@ -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; | |||
There was a problem hiding this comment.
Default for browser is 100 anyway, so just set this explicitly, to avoid undefined values.
pngwn
approved these changes
Mar 25, 2024
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This pull request makes the slider look more logical and compliant with UX standards. Now in the inactive state the slider looks more subdued and the cursor on the hover is displayed correctly.
Closes: #7813