jQuery用户界面滑块：移动的值（与）处理

Question

我用我的页面中的jQuery UI滑块组件设置范围的价格。 我也可以使用他们的ui.values []来设置和显示其他div中的新值。

我怎样才能让看到下的新值。即如果我将 手柄移动到$ 100，我想在该手柄下设置“$ 100”文本。

顺便说一句，我使用范围版本 - 设置一个价格范围，所以我有两个手柄在我的滑块（最小& max）。

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

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

看到它的行动：http://jsfiddle.net/william/RSkpH/1/。

Answer 2

change =>该事件在滑动停止时触发，或者如果值以编程方式更改（通过值方法）。参与事件和用户界面。使用event.originalEvent来检测值是否通过鼠标，键盘或编程方式更改。使用ui.value（单处理滑块）获取当前句柄的值$（this）.slider（'values'，index）以获取另一个句柄的值。

http://docs.jquery.com/UI/Slider#event-change

Answer 3

我只想把标签手柄内，而不是在这个答案重新定位他们所有的时间，如：https://stackoverflow.com/a/7431057/1250436

$("#slider").slider({ 
    range: true, 
    min: 100, 
    max: 500, 
    step: 10, 
    values: [100, 500], 
    animate: 'slow', 
    create: function() { 
     $('#min').appendTo($('#slider a').get(0)); 
     $('#max').appendTo($('#slider a').get(1)); 
    }, 
    slide: function(event, ui) { $(ui.handle).find('span').html('$' + ui.value); } 
}); 

更新

这不起作用在Chromium for Linux中。奇怪的gfx错误发生。

见工作演示：http://jsfiddle.net/ohcibi/RvSgj/2/

Answer 4

我追求同一个目标，我决定去与引导的提示。您可以尝试this JSFiddle上的代码。

$('#slider').slider({ 
    range: true, 
    min: -60, 
    max: 60, 
    values: [ init_start_at, init_end_at ], 
    slide: function(event, ui) { 
     // Allow time for exact positioning 
     setTimeout(function(){ 
      $(ui.handle).attr('title', ui.value + '°C').tooltip('fixTitle').tooltip('show'); 
     }, 5); 
    }, 
    create: function(event, ui) { 
     var target = $(event.target); 
     var handles = $(event.target).find('a'); 
     var container, wait; 

     // Wait for the slider to be in position 
     (wait = function() { 
      if ((container = target.parents('.content')).length != 0) { 
       handles.eq(0).tooltip({animation: false, placement: 'top',trigger: 'manual', container: container, title: init_start_at + ' °C'}).tooltip('show'); 
       handles.eq(1).tooltip({animation: false, placement: 'bottom',trigger: 'manual', container: container, title: init_end_at + ' °C'}).tooltip('show'); 
      } else { 
       setTimeout(wait, 50); 
      } 
     })(); 
    } 
}); 

希望它可以帮助别人。

Answer 5

通过包含引导工具提示可以创建一个漂亮的滑块。这是使用引导工具提示的滑块的更新版本。 http://jsfiddle.net/ykay/jL044k1c/

function slide(event, ui) { 
    setTimeout(function() { 
     $(ui.handle).attr('title', ui.value).tooltip('fixTitle').tooltip('show'); 
    }, 0); 
} 
function create(event, ui, start, end) { 
    var handles = $(event.target).find('span'); 
    handles.eq(0).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(0), title: start}).tooltip('show'); 
    handles.eq(1).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(1), title: end}).tooltip('show'); 
} 
$('#slider').slider({ 
    range: true, 
    min: 0, 
    max: 100, 
    values: [20, 80], 
    slide: function (event, ui) { 
     slide(event, ui) 
    }, 
    create: function (event, ui) { 
     create(event, ui, $(this).slider('values', 0), $(this).slider('values', 1)) 
    } 
}); 

Answer 6

可以这么轻松的找到它jQyeryUI滑块页的官方文档在下面的例子中

http://jqueryui.com/slider/#custom-handle