jQuery UI的滑块 - 输入一个值，滑块移动到另一个位置 [英] Jquery UI Slider - Input a Value and Slider Move to Location

问题描述

我想知道是否有人已经找到了解决方法或例子来实际填充滑块的输入框，并有将其滑动到合适的位置的onblur（）。目前，大家都知道，它只是更新此值与位置你在。因此，在某些方面，我试图扭转这个惊人的滚动条的功能。

I was wondering if anyone has found a solution or example to actually populating the input box of a slider and having it slide to the appropriate position onBlur() .. Currently, as we all know, it just updates this value with the position you are at. So in some regards, I am trying to reverse the functionality of this amazing slider.

中的一个链接，我发现： HTTP：//www.webdeveloper .COM /论坛/存档/的index.php / T-177578.html 是有点过时，但看起来他们做出了尝试。然而，到了结果的链接不存在。我希望有可能是一个解决办法在那里。

One link I found: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html is a bit outdated, but looks like they made an attempt. However, the links to the results do not exist. I am hoping that there may be a solution out there.

我知道长丝具有重新设计的滑块来处理选择（下拉）值，它完美的作品。所以目标会做同样的，但有一个输入文本框。

I know Filament has re-engineered the slider to handle select (drop down) values, and it works flawlessly.. So the goal would be to do the same, but with an input text box.

推荐答案

这是否会做你想要什么？

Will this do what you want?

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

在滑块每个选项都有一个setter和一个getter，这样你就可以设置值，正如上面的例子。从文档：

Each option on the slider has a setter as well as a getter, so you can set the value with that, as in the example above. From the documentation:

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

更新：

有关双滑块，你需要使用：

For dual sliders you'll need to use:

$("#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 ，以确保一个值不通过其他的，作为二传似乎并不$ p还$ pvent这一点。

You'll need to use Math.min/max to make sure that one value doesn't pass the other, as the setter doesn't seem to prevent this.

您几乎还有当你使用 $（＃滑块范围）。滑块（值，0）来获取每个值。很多的jQuery有那种其中额外的参数是用来设置值的get / set公约。

You were almost there when you were using the $("#slider-range").slider("values", 0) to get each value. A lot of jQuery has that kind of get/set convention in which the extra parameter is used to set the value.

这篇关于jQuery UI的滑块 - 输入一个值，滑块移动到另一个位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！