Closed
Conversation
Three fixes to prevent UI freeze when updating slider properties: 1. Remove redundant `range_input.value` set from $effect - bind:value already handles DOM sync, and the direct set conflicts when min/max change simultaneously (browser clamps to stale bounds) 2. Make range_input reactive ($state) and guard against undefined - when visible=false, Block doesn't render content so range_input is undefined; making it $state ensures the CSS progress effect re-runs when the element becomes available 3. Use untrack() for old_value write in change detection effect - prevents unnecessary $effect re-runs from writing $state 4. Reorder range input attributes so min/max/step are set before bind:value, preventing browser clamping to stale bounds Closes #12995 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Collaborator
Author
|
kumquat didnt work again |
Collaborator
🪼 branch checks and previews
Install Gradio from this PR pip install https://gradio-pypi-previews.s3.amazonaws.com/a688f99ca6f1f0a35d47e1537e39d406aaaf09e3/gradio-6.9.0-py3-none-any.whlInstall Gradio Python Client from this PR pip install "gradio-client @ git+https://github.com/gradio-app/gradio@a688f99ca6f1f0a35d47e1537e39d406aaaf09e3#subdirectory=client/python"Install Gradio JS Client from this PR npm install https://gradio-npm-previews.s3.amazonaws.com/a688f99ca6f1f0a35d47e1537e39d406aaaf09e3/gradio-client-2.1.0.tgz |
Collaborator
🦄 change detectedThis Pull Request includes changes to the following packages.
|
This file contains hidden or 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
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.
Summary
gr.update()orgr.Slider()constructor in callbacks$effectthat syncedrange_input.valuedirectly conflicted with Svelte'sbind:value— when min/max changed simultaneously with value, the browser clamped to stale bounds, causing a reactive loopjs/slider/Index.svelte:range_input.valueset (already handled bybind:value)range_inputreactive ($state) with null guard so the CSS progress effect works correctly when visibility togglesold_valuewrite inuntrack()to prevent unnecessary effect re-runsmin/max/stepare set beforebind:valueCloses #12995
Test plan
pnpm vitest run js/slider/— unit tests passgr.updateandgr.Slidervariants)🤖 Generated with Claude Code