Question

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

然而原始滑块的范围和尺寸太小。我需要min: -100和max: +100。我已经足够轻松地将滑块的JS和CSS更新为必需的大小。但是，工具提示不再与滑块手柄匹配或保持同步。当我用Firebug检查元素时，我可以看到工具提示位于滑块左侧的中心位置，我相信它只能在-100px和+ 100px之间移动。（见下图）

靠近最左边的滑块工具提示： enter image description here

最右边的滑块工具提示： enter image description here

我尝试了多种解决方案，包括为JS中的工具提示设置min:和max:范围，（从未工作）并更改CSS以尝试将其居中并使其内联但我无法似乎得到了它。

有谁知道如何让工具提示复制滑块手柄的移动，是否需要在JS或CSS中进行更改？

我还尝试在JSFiddle中复制该问题，但滑块手柄没有出现。

我的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);
});

jQuery滑杆工具提示不与滑块手柄同步移动

1 个答案: