Jquery UI Slider - 输入值和滑块移动到位置答案

【问题标题】：Jquery UI Slider - Input a Value and Slider Move to LocationJquery UI Slider - 输入值和滑块移动到位置
【发布时间】：2009-08-25 18:14:47
【问题描述】：

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

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

我知道 Filament 已经重新设计了滑块来处理选择（下拉）值，并且它可以完美地工作。所以我们的目标是做同样的事情，但使用输入文本框。

【问题讨论】：

标签： ajax jquery-ui jquery slider jquery-ui-slider

【解决方案1】：

这会做你想做的事吗？

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

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

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

更新：

对于双滑块，您需要使用：

$("#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 约定，其中额外的参数用于设置值。

【讨论】：

这就是我要做的，它是一个双滑块。我尝试使用您的示例，但没有成功。正如您在警报功能中看到的那样，甚至我的吸气剂也是不同的。我注释掉了警报和测试设置器。但是，它会将 [object] 作为值发送回文本框。我将不得不拆分代码，因为我剩下的字符不多了..
好的，我似乎找不到在此处或至少在评论部分发布代码的方法，因此我将其发布在我的网站上。如果您不介意，请查看源代码。如果您更喜欢我在 drupal 之外发布它，我也可以这样做。谢谢，我感谢所有的帮助！ dev.brilliance.com/test-slider

【解决方案2】：

我已经围绕 jQuery UI 滑块做了一些工作，以使其接受来自文本框的值，它可能不完全是您所追求的，但可以提供帮助：

http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html

【讨论】：

太好了，我们如何将这个值传递给表单字段？我还没有检查你的代码，所以还没有看到更新了哪些值。谢谢

【解决方案3】：

$slider = $("#slider");
            $("#amountMin").blur(function () {      
              $slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
              $(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));

            });
            $("#amountMax").blur(function () {
              $slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );                              
              $(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
            });

我刚刚使用了 martin 的代码并将 id 更新为#slider，还按照他的建议添加了 math.max，这样滑块就不会重叠。

【讨论】：

嗨，这应该添加到文档中。