jQuery slider 工具提示不与 slider handle 同步移动

Question

我有一个 jQuery slider ，我正在从 Django Python 应用程序中的 tutorial by Thoriq Firdaus 进行自定义。我一直在寻找的主要功能是一个工具提示，它会随着 slider handle 的移动而更新，然后随 slider handle 一起移动，这两者都有。

然而，原始 slider 的范围和大小太小。我需要 min: -100 和 max: +100。我很容易地将 slider 的 JS 和 CSS 更新为所需的大小。但是，工具提示不再与 slider handle 匹配或保持同步。当我用 Firebug 检查元素时，我可以看到工具提示位于 slider 左侧的中心，我相信它只在 -100px 和 +100px 之间移动。 (见下图)

靠近最大左侧的 slider 工具提示:

最右侧的 slider 工具提示:

我尝试了多种解决方案，包括在 JS 中为工具提示设置 min: 和 max: 范围(从未奏效)，并更改 CSS 以尝试将其居中并使其内联移动，但我似乎无法理解。

有谁知道如何让工具提示复制 slider handle 的移动，这是我必须在 JS 或 CSS 中更改的内容吗？

我也尝试在 JSFiddle 中复制这个问题，但没有出现 slider handele。

我的 HTML

<section>   
    <span class="tooltip"></span>   
    <div id="slider"></div>  
</section> 

我的 CSS

#slider{  
    border-width: 1px;  
    border-style: solid;  
    border-color: #333 #333 #777 #333;  
    border-radius: 25px;  
    width: 700px;  
    position: absolute;  
    height: 13px;  
    background-color: #8e8d8d;  
    background: #85837A;  
    box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5),   
                0 1px 0 0px rgba(250, 250, 250, .5);  
    left: 20px;  
} 

.tooltip {  
    position: absolute;  
    bottom: 10px;
    display: block;  
    z-index: 1031;
    width: 35px;  
    height: 20px;  
    color: #E456ff;  
    bgcolor: #E456ff;      
    text-align: center;  
    font: 10pt Tahoma, Arial, sans-serif ;  
    border-radius: 3px;  
    border: 1px solid #333;  
    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .3);  
    box-sizing: border-box;  
    background: linear-gradient(top, rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);  
    opacity: 1;
    filter: alpha(opacity=1);       
}  

我的 JS

$(function() {

    //Store frequently elements in variables
    var slider  = $('#slider'),
        tooltip = $('.tooltip');

    //Hide the tooltip at first
    tooltip.hide();

    //Call the Slider
    slider.slider({
        //Config
        //range: "min",
        min: -100,
        max: +100,
        value: 0,

        start: function(event,ui) {
            tooltip.fadeIn('fast');
        },

        //Slider Event
        slide: function(event, ui) { //When the slider is sliding

            var value  = slider.slider('value'),
                volume = $('.volume');

            tooltip.css('left', value).text(ui.value);  //Adjust the tooltip accordingly
        },

        stop: function(event,ui) {
            tooltip.fadeOut('slow');
        },
    });

});

Answer 1

http://jsfiddle.net/NKTpT/2/

现在检查..我认为它完成了。

改变了:

init values acc to width %

编辑:为了后代，以防 JSFiddle 消失

下面的代码是 nsthethunderbolt 提供的 JSFiddle 解决方案，我在这里复制了它。

HTML

    <section> <span class="tooltip"></span> 
        <div id="slider"></div>
        <div id="slider"></div>
    </section>

CSS

section {
    width: 700px;
    height: auto;
    margin: 0px auto 0;
    position: relative;
}
#slider {
    border-width: 1px;
    border-style: solid;
    border-color: #333 #333 #777 #333;
    border-radius: 25px;
    width: 400px;
    position: absolute;
    height: 13px;
    background-color: #8e8d8d;
    background: #85837A;
    box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5), 0 1px 0 0px rgba(250, 250, 250, .5);
    left: 20px;
}


.tooltip {
    border: 1px solid #333;
    border-radius: 3px;
    top:20px;
    position:absolute;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);

    color: #e456ff;
    display: block;
    font: 10pt Tahoma, Arial, sans-serif;
    height: 20px;
    opacity: 1;

    text-align: center;
    width: 35px;
    z-index: 1031;
}

JS

$(function () {
    var initX=0,minX=50,width=400;
    //Store frequently elements in variables
    var slider = $('#slider'),
        tooltip = $('.tooltip');

    //Hide the tooltip at first
    //tooltip.hide();

    //Call the Slider
    slider.slider({
        //Config
        //range: "min",
        min: -50,
        max: +50,
        value: 0,

        start: function (event, ui) {
            tooltip.fadeIn('fast');
        },

        //Slider Event
        slide: function (event, ui) { //When the slider is sliding
            var value = slider.slider('value'),
                volume = $('.volume');
            tooltip.css('left', initX+(value*width)/100).text(ui.value); //Adjust the tooltip accordingly
        },

        stop: function (event, ui) {
          //  tooltip.fadeOut('slow');
        },
    });
    initX=slider.slider("value");
    var txt=initX;
   initX+=(minX*width)/100;
tooltip.css('left',initX).text(txt);
});