Blazor data-binding of input range doesn't seem to work properly with floating point step

user_7745011 0
Viewed 564

I have a slider, which the user should use to set a percentage threshold value. The following code snipped works fine:

<span class="label label-default">Detection Threshold: @_objectDetectionThreshold %</span>
<input type="range" class="slider" min="0.0" step="1" max="100.0"
    @bind-value="_objectDetectionThreshold" @bind-value:event="oninput"
    data-toggle="tooltip" title=@_objectDetectionThreshold data-placement="top" />

_objectDetectionThreshold is simply a private field in the code:

private float _objectDetectionThreshold = 80.0f;

Changing the code above only by setting step="0.1", or any float value will cause some issues, where the value only gets update very slowly and the slider will start to jump around while dragging. What is the issue here and how can it be avoided?

blazor data-binding html
2 Answers

Thanks to the comment by Jesse Good, I've realized that the cause of the abberation is the display mode of the span element, which should be block and not inline. Thus you can either use:

<span style="display: block">Detection Threshold: @_objectDetectionThreshold %</span>

Or a div element, which is by default a block element

Now your miserable element can work well.

The issue is in the rendering domain, not conversion. The reason for the aberration is clear, the solution is clear, but some, perhaps lots of thought is required to get a complete picture why the rendering is distorted that way...

=======================This is my comment =====================

All the code snippets you provided prove my claim, and you do agree with me, not only with code but with words: exactly as you described But again, and this is the fourth time I'm telling you this: Run your code on your own PC with a span with style="display: block" omitted, but with CultureInfo englishCultureInfo = new CultureInfo("en-US");

...OK run this code and tell me if it works for you:

<span class="label label-default">
    Detection Threshold: @_objectDetectionThreshold %
</span>
<input type="range" class="slider my-2" min="0.0" step="0.1" max="100.0"
        @bind-value="_objectDetectionThreshold" @bind-value:event="oninput" @bind-value:culture="@System.Globalization.CultureInfo.InvariantCulture"
        data-toggle="tooltip" title=@_objectDetectionThreshold data-placement="top" />

This code is supposed to work for you if the issue is one of conversion, as it configure:

@bind-value:culture="@System.Globalization.CultureInfo.InvariantCulture"

Right? If it does not, it is because the code snippet is using inline span element.

Note: Not all dead old folks with Covid-19 dies from the disease, or their death is related to it. And not all code modifications introduced to software program are the correct solution, though their introduction result in the issues disappear.

user_61528910

I finally got the correct answer: The issue, was a simple culture info problem. My Windows installation is set to German, where the decimal divider is a , instead of a ..

Changing the code to

<input type="range" class="slider" min="0.0" step="0.1" max="100.0"
           @bind-value="_objectDetectionThreshold" @bind-value:event="oninput" @bind-value:culture=@englishCultureInfo
           data-toggle="tooltip" title=@_objectDetectionThreshold data-placement="top" />
@code{
    private float _objectDetectionThreshold = 80.0f;
    CultureInfo englishCultureInfo = new CultureInfo("en-US");

}

solves the problem.

Alternatively globalization could be handled globally in the project file (see relevant docs):

<PropertyGroup>
  <InvariantGlobalization>true</InvariantGlobalization>
</PropertyGroup>

which solves the problem as well.

@enet, since I'm sure your answer provides an important part to consider, could you add this info to your answer, so that we have one combined answer. I'll then mark it as the correct one.

user_77450110
Related