fix: Cross Dependent sliders do not reset thumb after range is updated.

[russellSmithMS]

🐛 Bug Report

I have a Blazor app that I am using to display electrical usage over time. On my page, I have 4 sliders. 2 represent the years associated with the data and the other 2 represent the months. These are used for min/max. When I drag the start year, I want the min option for end year to be no smaller than the selected start year. Same goes for Start/end month.
The underlying selected (bound) values are correct, the display of the slider bar is what does not line up.

💻 Repro or Code Sample

This is a page I created to repro this issue.

@page "/"
@rendermode InteractiveServer
<PageTitle>Home</PageTitle>

<FluentGrid Style="width:100%">
    <FluentGridItem xs="12">
        <h1>Related Sliders</h1>
    </FluentGridItem>
    <FluentGridItem xs="2" Justify="JustifyContent.FlexEnd">From Month</FluentGridItem>
    <FluentGridItem xs="4">
        <FluentSlider Step="1" Min="1" Max="EndMonth" @bind-Value="StartMonth">
            @foreach (var sy in GetCollection(1, EndMonth))
            {
                <FluentSliderLabel Position="@sy">@sy</FluentSliderLabel>
            }
        </FluentSlider>
    </FluentGridItem> 
    <FluentGridItem xs="2" Justify="JustifyContent.FlexEnd">To Month</FluentGridItem>
    <FluentGridItem xs="4">
        <FluentSlider Step="1" Min="StartMonth" Max="12" @bind-Value="EndMonth">
            @foreach (var sy in GetCollection(StartMonth, 12))
            {
                <FluentSliderLabel Position="@sy">@sy</FluentSliderLabel>
            }
        </FluentSlider>
    </FluentGridItem>
</FluentGrid>
@code {
    private int StartMonth = 1;
    private int EndMonth = 12;

    public IEnumerable<int> GetCollection(int start, int end) => Enumerable.Range(start, end - start + 1);
}

This is what the output looks like

When I slide the To Month to 6 The from month's max value changes to 6 and the steps reflect properly.

But when I then change the From month to 5, the To Month slider stays pinned to middle of the line, but the steps update to reflect the correct choices.

When I try to slide the To Month again, it jumps to the step that it's closest to (in my example, between 8 and 9, and I then have to move the slider again back to 6 for both sliders to look correct.

But, if I again, change the From Month back to 1, the To Month no longer lines up as expected.

🤔 Expected Behavior

Both the slider indicator and the steps should be reflecting the same scale/numbers

😯 Current Behavior

Steps do get updated, but bar and button/thumb does not chanage.

💁 Possible Solution

When the Min/Max values are dependent on flexible values, the position should render last.

🔦 Context

🌍 Your Environment

• OS & Device: [VS 2022 Preview, Win11 ]
• Browser [Brave, Edge, Chrome]
• .NET and Fluent UI Blazor library Version [.NET 8 Fluent 4.6.1]

[vnbaaij]

Hi,

Unfortunately, the needed sync is not hooked up in the underlying web component.

There exists a calculateNewValue function that updates the value based on current position (by using a convertPixelToPercent function), but that only gets called on mouse move and mouse down action, not when the value is changed programmatically

please raise an issue in the microsoft/fast repo for this

[oneolddev]

@russellSmithMS

I have a temporary work-around if you are interested. I derived a new component called MyFluentSlider from FluentSlider that you can use in it's place. You'll need to add 3 files to project.

MyFluentSlider.razor

@inherits FluentSlider<TValue>
@typeparam TValue
@attribute [CascadingTypeParameter(nameof(TValue))]

<div @ref=container>
    @{
        base.BuildRenderTree(__builder);
    }
</div>

MyFluentSlider.razor.cs

using Microsoft.AspNetCore.Components;
using Microsoft.FluentUI.AspNetCore.Components;
using Microsoft.JSInterop;

namespace Server.Components;

public partial class MyFluentSlider<TValue> : FluentSlider<TValue>, IAsyncDisposable
    where TValue : System.Numerics.INumber<TValue>
{
    private const string JAVASCRIPT_FILE = "./MyFluentSlider.js";
    private ElementReference? container;

    /// <summary />
    [Inject]
    private IJSRuntime JSRuntime { get; set; } = default!;

    /// <summary />
    private IJSObjectReference? Module { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE);
        }
        await Module!.InvokeVoidAsync("sliderUpdate", container);
    }
    public ValueTask DisposeAsync()
    {
        if (Module is not null)
        {
            return Module.DisposeAsync();
        }
        return ValueTask.CompletedTask;
    }
}

MyFluentSlider.js

export function sliderUpdate(ref) {
    var fs = ref.getElementsByTagName('fluent-slider')[0];

    // fixes issue where you can't reset value programmatically
    fs.value = fs.attributes['value'].value;

    // fixes issue where the value indicator is not redrawn when either the min or max is changed
    fs.setThumbPositionForOrientation(fs.direction);
}

If you are using the folder layout from the fluentblazor template, place the first two files in the Components folder. Place the javascript file directly in the wwwroot folder. Change all FluentSlider to MyFluentSlider.

[vnbaaij]

Nice one Gary!

I think we can add that to the regular slider in the lib.

Fancy doing a PR for that?

[oneolddev]

Nice one Gary!

I think we can add that to the regular slider in the lib.

Fancy doing a PR for that?

Sure 😄. I was hesitating suggesting a PR until I could verify the root cause. My adhoc preliminary testing of the fluent-slider component independently didn't seem to reveal a problem with it. I'd like to do some more investigating before submitting a PR.

[vnbaaij]

Fixed with PR mentioned above. Will be in next release. Closing this.