Skip to content

fix: FluentSlider's FluentSliderLabels doesn't recover from Disabled=true #2794

@RobGess

Description

@RobGess

🐛 Bug Report

If a FluentSlider's Disabled=true by default, the FluentSliderLabels doesn't recover properly when setting Disabled=false during runtime. If Disabled=false by default and manually toggled during runtime, everything works fine.

Current behavior: Slider Disabled=true by default and was set to false during runtime (FluentSliderLabels are still washed out).
Image

Expected behavior: Slider Disabled=false by default and toggled during runtime (FluentSliderLabels are displayed properly).*
Image

💻 Repro or Code Sample

See FluentBlazorTest or:

  1. Create new fluent blazor project: dotnet new fluentblazor --name FluentBlazorTest
  2. Add @rendermode InteractiveServer to Home.razor pager
  3. Add FluentSlider, FluentButton and FluentLabel to toggle Disabled property and display current state:
<FluentStack Orientation="Orientation.Vertical" VerticalGap="30" Style="margin-top:2rem;">
    <FluentSlider Min="0" Max="100" Step="1" Disabled=@_disabled Style="width:50%">
        <FluentSliderLabel Position="0">0</FluentSliderLabel>
        <FluentSliderLabel Position="10">10</FluentSliderLabel>
        <FluentSliderLabel Position="20">20</FluentSliderLabel>
        <FluentSliderLabel Position="30">30</FluentSliderLabel>
        <FluentSliderLabel Position="40">40</FluentSliderLabel>
        <FluentSliderLabel Position="50">50</FluentSliderLabel>
        <FluentSliderLabel Position="60">60</FluentSliderLabel>
        <FluentSliderLabel Position="70">70</FluentSliderLabel>
        <FluentSliderLabel Position="80">80</FluentSliderLabel>
        <FluentSliderLabel Position="90">90</FluentSliderLabel>
        <FluentSliderLabel Position="100">100 %</FluentSliderLabel>
    </FluentSlider>

    <FluentButton OnClick="ToggleDisabled">Toggle slider</FluentButton>
    <FluentLabel>Slider disabled is @_disabled</FluentLabel>
</FluentStack>

🤔 Expected Behavior

FluentSliderLabel's color should be set properly.

😯 Current Behavior

FluentSliderLabel's color is not set properly.

🌍 Your Environment

  • OS: Windows 11 Enterprise
  • Google Chrome Version 129.0.6668.101 (64-Bit), MS Edge Version 129.0.2792.89 (64-Bit)
  • Microsoft.FluentUI.AspNetCore.Components 4.10.2

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions