我在页面中使用了jQuery UI滑块组件来设置一系列的价格.
我也可以使用它们的ui.values []来设置和显示其他div中的新值.
我也可以使用它们的ui.values []来设置和显示其他div中的新值.
我如何才能看到句柄下的新值.即如果我移动了
处理到$100,我想在该句柄下设置“$100”文本.
BTW,我使用范围版本 – 设置一系列的价格,所以我有两个手柄在我的滑块(最小和最大).
var minPriceRange=100;
var maxPriceRange=500;
$( "#priceRangeSlider" ).slider({
range: true,min: minPriceRange,max: maxPriceRange,step: 10,values: [ minPriceRange,maxPriceRange ],slide: function( event,ui ) {
("#fromRangeText").text("$" + ui.values[ 0 ]);
$("#toRangeText").text("$" + ui.values[ 1 ]);
}
});
解决方法
您可以使用jQuery UI中的.position实用程序函数来放置标签：
$("#slider").slider({
...
slide: function(event,ui) {
var delay = function() {
var handleIndex = $(ui.handle).data('index.uiSliderHandle');
var label = handleIndex == 0 ? '#min' : '#max';
$(label).html('$' + ui.value).position({
my: 'center top',at: 'center bottom',of: ui.handle,offset: "0,10"
});
};
// wait for the ui.handle to set its position
setTimeout(delay,5);
}
});
