Question

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

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

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

Answer 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约定，其中使用额外的参数来设置值。

Answer 2

我已经完成了一些关于jQuery UI滑块的工作，使它接受来自文本框的值，它可能不是你所追求的但可能有所帮助：

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

Answer 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())));
            });

我刚刚使用了马丁的代码并将id更新为#slider也添加了他所建议的math.max，因此滑块不会重叠。

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

3 个答案: