jQuery 슬라이더 막대 도구 설명이 슬라이더 핸들과 동기화되지 않습니다.

Question

장고 파이썬 응용 프로그램에서 tutorial by Thoriq Firdaus에서 사용자 정의하고있는 jQuery 슬라이더 막대가 있습니다. 내가 찾던 주요 기능은 슬라이더 핸들을 이동하면서 슬라이더 핸들과 함께 움직이는 툴팁이었습니다.

그러나 원본 슬라이더의 범위와 크기가 너무 작습니다. min: -100과 max: +100이 필요합니다. JS 및 CSS 슬라이더를 필요한 크기로 쉽게 업데이트했습니다. 그러나 툴팁은 더 이상 슬라이더 핸들과 일치하거나 속도를 유지하지 않습니다. Firebug를 사용하여 요소를 검사 할 때 슬라이더의 왼쪽에 툴팁이 가운데에 표시되며 -100 픽셀 및 100 픽셀 내에서만 움직이는 것으로 볼 수 있습니다. (아래 이미지 참조)

근처 최대의 슬라이더 툴팁 왼쪽 :

최대 오른쪽 슬라이더 툴팁 : 나는 min: 및 max: 범위를 설정하는 등의 여러 솔루션을 시도

JS의 툴팁을 위해, (결코 일하지 않았다) 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는 아래 코드 여기 coppied하는 한 nsthethunderbolt 의해 제공된 JSFiddle 솔루션

을 disapears.

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