如何将整数输入值绑定到滑块

Question

我想要一个 Slider 和一个 Input 控件，两者都对应一个特定值。

用户应该能够使用输入字段或滑块来输入他的值。

如果用户更改滑块上的值，输入字段应显示滑块的值。如果用户在输入字段中输入内容，滑块应移动到相应的值。
目前，我正在创建一个 JSONModel，其值为属性以绑定：

let model = new JSONModel({
  valueName: 10
});
settings.setModel(model);

现在，当我更改滑块上的值时，输入字段的更新工作正常。但是，如果我在输入字段中输入一个值，滑块不会移动到该值。

为什么会这样，我该如何解决我的问题？

<Slider value="{/valueName}" step="10" width="200px" />
<Input value="{/valueName}" type="Number" width="50px" />

由于给定的解决方案仅适用于整数值，因此创建了浮点值的后续问题

Answer 1

起初我对此感到困惑。原因似乎是该值保存为字符串（尽管您明确指定了数字或明确地将初始模型中的值绑定到数值）。我通过处理输入的 liveChange 事件、检索 valueName 的模型值、对该值执行 parseInt 然后将 Slider 设置为该值来检查这一点。这会导致滑块在我更改输入时更新。

控制器：

handleChange: function(){
    var slider = this.getView().byId("slider");
    var val = this.getView().getModel().getProperty("/valueName");
    slider.setValue(parseInt(val));
}

XML 查看：

<Slider id="slider" value="{/valueName}" min="0" max="100" step="10" width="200px" />
<Input textAlign="Center" value="{/valueName}" type="Number" width="50px" valueLiveUpdate="true" liveChange="handleChange"/>

需要注意的是，如果我想将滑块更新为 70，我需要先输入 0（因为滑块设置会在我立即将值转换为最小值 (0) 或 10输入一个数字 - 给定 liveUpdate 的正确行为）。有很多方法可以解决这个问题，但我想我会给你答案，你可以从那里弄清楚该怎么做。

最终我认为这是一个错误。编辑 - 这不是错误 - 请参考此答案下方 Boghyon 的评论

Answer 2

The user should be able to use either the input field or the slider to input his value.

如果您不知道，您可以使用内置的工具提示输入功能：

<Slider
  showAdvancedTooltip="true"
  showHandleTooltip="false"
  inputsAsTooltips="true"
/>

给你这个：

Answer 3

滑块等待 type float.

的值

然而，输入字段将输入计算为 字符串。

您可以通过将适当的 type 分配给绑定信息对象以声明方式解决它：

Either 将 sap/ui/model/type/String* 分配给 Slider 的 value 绑定类型 ⇒ 将模型中的字符串值格式化为 float 在将值传递给滑块之前键入。
由于与 String 类型的双向绑定，从 Slider 操作的浮点值将转换回 string 值，然后将其存储在模型中。
或将 sap/ui/model/type/Float* 分配给输入的 value 绑定类型 ⇒ 将值存储为 number模型。然后 Slider 可以直接使用数字值。

这是上述方法的演示：https://jsbin.com/sodihub/edit?js,output

在绑定中使用 type 功能将允许解析、 格式化 ，甚至验证更新控件前的模型值，同时仍保持双向数据绑定模式。

* 如果与 ODataModel 绑定，需要 sap/ui/model/odata/type/Decimal |String 改为！

如何将整数输入值绑定到滑块

How to bind integer Input value to Slider

sapui5