Skip to content

Fix Slider property update freezing UI#13003

Closed
hannahblair wants to merge 1 commit intomainfrom
fix/slider-property-update-freeze
Closed

Fix Slider property update freezing UI#13003
hannahblair wants to merge 1 commit intomainfrom
fix/slider-property-update-freeze

Conversation

@hannahblair
Copy link
Copy Markdown
Collaborator

Summary

  • Fixes UI freeze when updating Slider properties (visibility, min/max/value) via gr.update() or gr.Slider() constructor in callbacks
  • Root cause: The $effect that synced range_input.value directly conflicted with Svelte's bind:value — when min/max changed simultaneously with value, the browser clamped to stale bounds, causing a reactive loop
  • Three targeted fixes in js/slider/Index.svelte:
    1. Removed redundant range_input.value set (already handled by bind:value)
    2. Made range_input reactive ($state) with null guard so the CSS progress effect works correctly when visibility toggles
    3. Wrapped old_value write in untrack() to prevent unnecessary effect re-runs
    4. Reordered range input attributes so min/max/step are set before bind:value

Closes #12995

Test plan

🤖 Generated with Claude Code

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>
@hannahblair
Copy link
Copy Markdown
Collaborator Author

kumquat didnt work again

@gradio-pr-bot
Copy link
Copy Markdown
Collaborator

gradio-pr-bot commented Mar 12, 2026

🪼 branch checks and previews

Name Status URL
Spaces ready! Spaces preview
🦄 Changes detected! Details

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/a688f99ca6f1f0a35d47e1537e39d406aaaf09e3/gradio-6.9.0-py3-none-any.whl

Install 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

@hannahblair hannahblair deleted the fix/slider-property-update-freeze branch March 12, 2026 15:23
@gradio-pr-bot
Copy link
Copy Markdown
Collaborator

🦄 change detected

This Pull Request includes changes to the following packages.

Package Version
@gradio/slider patch
gradio patch

  • Fix Slider property update freezing UI

‼️ Changeset not approved. Ensure the version bump is appropriate for all packages before approving.

  • Maintainers can approve the changeset by checking this checkbox.

Something isn't right?

  • Maintainers can change the version label to modify the version bump.
  • If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Slider property update freezes UI in Gradio ≥6.6.0 (works in 6.5.1)

2 participants