ajax - Jquery UI slider - 输入值并将 slider 移动到位置

Question

我想知道是否有人找到了实际填充 slider 的输入框并使其滑动到 onBlur() 的适当位置的解决方案或示例。目前，众所周知，它只是用你所在的位置。因此，在某些方面，我试图扭转这个令人惊叹的 slider 的功能。

我找到的一个链接:http://www.webdeveloper.com/forum/archive/index.php/t-177578.html有点过时了，但看起来他们做了尝试。但是，结果的链接不存在。我希望可能有一个解决方案。

我知道 Filament 重新设计了 slider 来处理选择(下拉)值，并且它工作完美。所以我们的目标是做同样的事情，但有一个输入文本框。

Answer 1

这会达到你想要的效果吗？

$("#slider-text-box").blur(function() {
  $("#slider").slider('option', 'value', parseInt($(this).val()));
});

slider 上的每个选项都有一个 setter 和 getter，因此您可以使用它来设置值，如上面的示例所示。来自文档:

//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);

更新:

对于双 slider ，您需要使用:

$("#amount").blur(function () {
  $("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
  $("#slider-range").slider("values", 1, parseInt($(this).val()));
});

您需要使用 Math.min/max 来确保一个值不会传递另一个值，因为 setter 似乎无法阻止这种情况。

当您使用 $("#slider-range").slider("values", 0) 获取每个值时，您就快到了。很多 jQuery 都有这种 get/set 约定，其中额外的参数用于设置值。