我在页面中使用了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);
- }
- });
