输入范围的 Blazor 数据绑定似乎不适用于浮点步长

Question

我有一个滑块，用户应该使用它来设置百分比阈值。以下代码片段工作正常：

<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只是代码中的私有字段：

private float _objectDetectionThreshold = 80.0f;

仅通过设置 step="0.1" 或任何浮点值来更改上面的代码会导致一些问题，其中值更新非常缓慢，并且滑块将在拖动时开始跳动。这里的问题是什么以及如何避免？

Answer 1

多亏了Jesse Good的评论，我才明白是span元素的显示模式造成的，应该是block而不是inline.因此你可以使用：

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

或者 div 元素，默认情况下是块元素

现在你的悲惨元素可以正常工作了。

问题出在渲染域，而不是转换。像差的原因很清楚，解决方案也很清楚，但是需要一些，也许需要很多思考才能获得完整的图像，为什么渲染会那样扭曲...

=======================这是我的评论================== ===

您提供的所有代码片段都证明了我的主张，您确实同意我的观点，不仅是代码，还有文字：exactly as you described但是，这已经是我第四次告诉您了: 运行您在 您自己的 PC 上的代码 省略了 style="display: block" 的跨度，但 CultureInfo englishCultureInfo = new CultureInfo("en-US");

...好的运行这个代码，告诉我它是否适合你：

<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" />

如果问题是转换问题，此代码 supposed 可以为您工作，因为它配置：

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

对吧？如果没有，那是因为代码片段使用了内联跨度元素。

注意：并非所有死于 Covid-19 的老人都死于这种疾病，或者他们的死亡与这种疾病有关。并非所有对软件程序进行的代码修改都是正确的解决方案，尽管它们的引入会导致问题消失。

Answer 2

我终于得到了正确答案：问题是一个简单的文化信息问题。我的 Windows 安装设置为德语，其中十进制分隔符是 , 而不是 ..

将代码更改为

<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");

}

解决问题。

或者可以在项目文件中全局处理全球化 (see relevant docs):

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

这也解决了问题。

@enet，因为我确定您的回答提供了一个需要考虑的重要部分，您能否将此信息添加到您的回答中，以便我们得到一个合并的答案。然后我会把它标记为正确的。

输入范围的 Blazor 数据绑定似乎不适用于浮点步长

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

html

data-binding

blazor