jquery滑块，其值高于它，随滑块一起移动

我创建了一个带有查询/滑块的滑块，并用css设置了它。 （ http://jsfiddle.net/9qwmX/ ）

我成功地将所选值放入div容器中; 但现在我希望容器与滑块“相关”。 我试图使用ui.handle及其css left属性，这是一个百分比。 但是这种行为有点奇怪：有时它会在滑块的左侧移动，有时会偏移10px。

问题：有没有人知道一个好方法让包含滑动值的盒子随手柄移动？

Answer 1

您可以添加一个类似工具提示的div，您可以将其附加到句柄，以便它随之移动。 你只需要用CSS定位它，就像这样：

JS

 var initialValue = 2012; // initial slider value var sliderTooltip = function(event, ui) { var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start) var tooltip = '
' + curValue + '
'; $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle } $("#slider").slider({ value: initialValue, min: 1955, max: 2015, step: 1, create: sliderTooltip, slide: sliderTooltip }); 

CSS ^{工具提示借用了twitter bootstrap框架}

 .tooltip { position: absolute; z-index: 1020; display: block; padding: 5px; font-size: 11px; visibility: visible; margin-top: -2px; bottom:120%; margin-left: -2em; } .tooltip .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top: 5px solid #000000; border-right: 5px solid transparent; border-left: 5px solid transparent; position: absolute; width: 0; height: 0; } .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #ffffff; text-align: center; text-decoration: none; background-color: #000000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } 

演示： http ： //jsfiddle.net/9qwmX/2/

Answer 2

你可以做这样的事情来构建你想要的东西，我正在使用event.pageX

 var newLeft = 100; $('#move').text(100).css('margin-left',115); $("#slider").slider( { value:100, min: 0, max: 500, step: 50, slide: function( event, ui ) { $( "#slider-value" ).html( ui.value ); var pos = (event.pageX > newLeft)? event.pageX + 8 : event.pageX - 42; newLeft = event.pageX; $('#move').text(ui.value).css('margin-left',pos); } } ); 

演示： http ： //jsfiddle.net/joycse06/Cw6u8/1/

Answer 3

这就是我会怎么做的。 为了帮助您入门：

利用“手柄”位置：

 var offset = $('.ui-slider-handle .ui-state-default .ui-corner-all"').offset(); var offsetLeft = offset.left; var offestTop = offset.top; 

使用绝对定位定位幻灯片值框：

 #tijdlijnDatum { position: absolute; } 

在slide事件中做一些事情：

 $( "#slider" ).slider({ slide: function(event, ui) { $('#tijdlijnDatum').css({ left: offsetLeft + 'px' }); // etc } });