3

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

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

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

4

3 回答 3

9

这会做你想要的吗？

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

于 2009-08-25T18:46:37.410 回答
4

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

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

于 2009-10-28T15:39:44.677 回答
2 
$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())));
            });

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

于 2010-07-21T19:36:21.360 回答