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

问题描述

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.

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

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);

UPDATE:

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

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.

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 Slider - 输入一个值并将滑块移动到位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！