Skip to content

MudRangeSlider max/min pins flickering when dragging beyond boundaries in Blazor Server (works fine in WASM) #614

@RostyslavArtiukh

Description

@RostyslavArtiukh

Bug Description

MudRangeSlider exhibits flickering and jerky behavior of the maximum pin when dragging it towards the minimum pin in Blazor Server.
This issue doesn't occur in Blazor WebAssembly where the pins properly respect boundaries without visual glitches.

Environment

  • .NET version: 9.0
  • Blazor hosting model: Server
  • MudBlazor version: 9.2.0
  • CodeBeam.MudBlazor.Extensions version: 9.0.3
  • Browser: Chrome
  • OS: Windows

Steps to Reproduce

  1. Use the demo component in Blazor Server
  2. Drag the maximum pin towards the minimum pin
  3. Before releasing the mouse, observe the flickering and jerky movement of the maximum pin
  4. Compare with the same component in Blazor WebAssembly

Demo Code Used

<MudGrid>
    <MudItem xs="12" sm="8">
        <MudRangeSlider @bind-Value="@_value" MinDistance="0" @bind-UpperValue="@_upperValue" Size="Size.Large" Variant="Variant.Filled" ValueLabel="true" Range="true"
                        Min="_min" Max="_max" SlideableMin="@_slideableMin" SlideableMax="@_slideableMax" Step="_step" Display="true">@_label</MudRangeSlider>
    </MudItem>
</MudGrid>

@code {
    private int _value = 25;
    private int _upperValue = 75;
    string _label = "Range";
    int _min = 0;
    int _max = 100;
    int? _slideableMin = 10;
    int? _slideableMax = 90;
    int _step = 1;
}

**Expected Behavior**
Pins should respect boundaries at the state level and not enter each other's territory, similar to how it works in Blazor WebAssembly - smooth movement without flickering.

**Actual Behavior**
In Blazor Server: Maximum pin flickers and jerks when dragged towards minimum pin, creating visual glitches before mouse release.

**Additional Information**

- This issue occurs across multiple versions, not just the latest
- The same component works perfectly in Blazor WebAssembly
- Tested on .NET 9.0 with Chrome browser
- Suggests this might be related to SignalR state synchronization in Blazor Server
- The boundary logic should prevent pins from crossing at the state level, not just visually

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions