如何将整数输入值绑定到滑块 [英] How to bind integer Input value to Slider

问题描述

我想要一个 Slider 和一个 Input 控件，它们都用于一个特定的值.

I want to have a Slider and an Input control, both for one specific value.

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

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

如果用户更改了 Slider 上的值，则输入字段应显示 Slider 的值.如果用户在输入字段中输入内容，则滑块应移动到相应的值.
目前，我正在创建一个 JSONModel，并将值作为要绑定的属性:

If the user changes the value on the Slider, the input field should show the Slider's value. And if the user inputs something in the input field, the Slider should move to the corresponding value.
Currently, I am creating a JSONModel with the value as a property to bind:

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

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

Now, when I am changing the value on the slider, the update of the input field is working fine. But if I'm entering a value in the input field, the Slider does not move to the value.

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

Why is that so and how do I solve my problem?

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

---

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

推荐答案

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

I was baffled by this at first. The reason appears to be that the value is saving as a string (in spite of you explicitly specifying number or clearly binding the value in the initial model to a numeric value). I checked this by handling the liveChange event off the Input, retrieving the model value of valueName, doing a parseInt on the value and then setting the Slider to that value. This causes the slider to update as I change the Input.

控制器:

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(因为滑块设置在我键入时会将值转换为 min (0) 或 10数字 - 鉴于 liveUpdate 的正确行为).有很多方法可以解决这个问题，但我想我会给你答案，你可以从那里弄清楚该怎么做.

The caveat was if I wanted to update the slider to, say, 70 I would need to key in the 0 first (as the slider settings as they stand convert the value to min (0) or 10 the moment I type a number - given the correct behaviour of liveUpdate). There are ways to work around this but I thought I'd get you the answer and you can figure out what to do from there.

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

Ultimately i think this is a bug. EDIT - this is not a bug - please refer comment by Boghyon below this Answer

这篇关于如何将整数输入值绑定到滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！