jquery - jQuery UI - 滑块和微调器没有正确地相互更新

Question

我正在尝试将 jQuery 的 Slider 绑定到 jQuery 的 Spinner，并让它们相互更新以及页面上的一些其他内容（进度条和在 h1 中显示输出）。

但是，当我尝试更改滑块时出现了我的问题。由于它们都在相互更改，移动 Slider 会更新 Spinner，而 Spinner 反过来会更新 Slider，但会出现一些奇怪的行为：在应用 css 样式以填充宽度时出现延迟。

我可以通过注释掉来解决延迟

        // Spinner speak to range slider fill
        // $( "#rangeFill" ).css( "width", ui.value + "%");

但是当用户更改微调器值时，只有滑块的手柄移动，而不是填充。

小提琴：http: //jsfiddle.net/PaulOD/2T9RU/

非常感谢任何帮助，谢谢，保罗

Answer 1

保罗，我相信你的问题是因为你在滑动时设置微调器的值的方式。如果您在滑动时移动得太快，则slide事件无法跟上您的步伐，结果您的spinner价值观会落后，这会导致您的问题。

if (ui.value > last) {
    $("#spinners").spinner("stepUp", 1);
}
if (ui.value < last) {
    $("#spinners").spinner("stepDown", 1);
}

所以像这样更新你的微调器：

$("#spinners").spinner("value", ui.value);

现在您的微调器将始终跟上最新的滑块值。

小提琴