Slider two-way bound issue

[wnvko]

Description

I am trying to bind slider and range slider to a variable.

Steps to reproduce

Use code like this:

<IgbSlider @bind-Value="_slider"></IgbSlider>
<IgbRangeSlider @bind-Value="_rangeSlider"></IgbRangeSlider>
...
@code {
private double _slider;
private IgbRangeSliderValue _rangeSlider;
}

Result

Slider does not update the bound variable when its value changes. Range slider actually have no Value and @bind-Value is not applicable. There should be a way to two-way bound it to a variable.

Expected result

Both slider and range slider should allow two way binding via @bind and it should work for both components.

Attachments

Attach a sample if available, and screenshots, if applicable.

[gmurray81]

@wnvko from my testing @bind-Value works fine for IgbSlider.

The key thing to look out for is that the variable used for @bind-Value must completely match the type of Value. For example if you were to bind against an int, it would not work since Value is double. This is because of the inflexibility of binding in Blazor.

There is however something we could do. If we altered the generation to make sure that Value is left a generic parameter T, then Blazor is smart enough to infer the generic parameter it needs to use when constructing IgbSlider. This isn't the only way to achieve this though, you could also extend IgbSlider with IgbIntSlider/IgbFloatSlider and they coerce their values into the Value property. Or its just a documentation issue that you must provide double as the value to bind against.

The other thing is that by default the two way binding is driven by igcChange, and this fires only when you blur the slider. This may be best, but if you want it to update as the slider is dragged, then the two way binding needs to be driven by Input or some other event. Blazor provides a way to do this as a user with the bind event parameter, so that you can tell it to listen to a different event for the binding. But its also possible that we may just want to default to using the event that fires as the slider changes for better feedback?

[wnvko]

@gmurray81 My variable is of type double, same type as the Value of the slider. Setting the Value of the slider like this initialize the slider with correct value:

private double _slider = 15.0d;
...
<IgbSlider Value="@_slider"></IgbSlider>

If I set the value via build-in two-way data binding like this:

private double _slider = 15.0d;
...
<IgbSlider @bind-Value="_slider"></IgbSlider>

again, it initializes and shows with the correct value. However, if I change the value the related variable is not updated. If I do this in Change event it works:

<IgbSlider Value="@_slider" Change="@(e => _slider = e.Detail)"></IgbSlider>

To summarize - @bind does not update the bound variable, view Change event I am able to update the related variable.

Finally, I am perfectly ok to have by default updating the bound value on blur. This is exactly what I am looking for.

[gmurray81]

@wnvko binds back fine in my example, which version are you targeting specifically? Could you send me along the sample so that I can see how it differs from mine?

[wnvko]

@gmurray81 It is latest public version - 23.2.204. Here is the repo where I am testing two-way data binding - https://github.com/wnvko/two-way-binding It is public one. Clone it and look in blazor folder. There are a lot of inputs there :)

[wnvko]

@gmurray81 I was able to narrow this down. With target framework set to 7.0 issue is not reproducible. However, my initial setup is with target framework set to 8.0 and here two-way data binding does not work.

This is working

  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

This is broken

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

[wnvko]

@gmurray81 After restarting my VS several times, and manually removed the bin/obj folders it is finally working in both 8.0 and 7.0 at my side. Probably some weird caching at my side.

Closing this issue now.

Thank you for your time.