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

我创建了一个带有查询/滑块的滑块,并用css设置了它. ( http://jsfiddle.net/9qwmX/)

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

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

解决方法

您可以添加一个类似工具提示的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 = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';

    $('.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/

原文地址：https://www.jb51.cc/jquery/177343.html