jQuery 슬라이더 버블

Question

사용자가 슬라이더 포인터를 움직일 때 버블을 jQuery 슬라이더 컨트롤 위에 표시하는 방법을 아는 사람이 있습니까? 이상 적으로는 범위 슬라이더에있는 두 포인터에 각각 독립적 인 거품이 있어야합니다. 거품은 사용자가 움직이는 슬라이더 포인터의 현재 선택된 값을 동적으로 보여줍니다. 힘든 소식입니다!

Answer 1

html로 ..

<div id="value1">&nbsp;</div> 
    <div id="value2">&nbsp;</div> 
    <div id="slider"></div> 

CSS

#value1 { position:relative; } 
#value2 { position:relative; } 

에 javscript ...

$("#slider").slider({ 
      animate:false, 
      range: true, 
     values:[0,400], 
     min: 0, 
     max: 500, 
     step: 1, 
     change: function(event, ui) { 
      updateValues(event,ui); 
     }, 
     slide: function(event, ui) { 
      updateValues(event,ui); 
     } 
    }); 

    function updateValues(event, ui) 
    { 
      var offset1 = $('.ui-slider-handle:first').offset(); 
      var offset2 = $('.ui-slider-handle:last').offset(); 
      var value1 = $('#slider').slider('values',0); 
      var value2 = $('#slider').slider('values',1); 
         $('#value1').text(value1).css({'left':offset1.left}); 
         $('#value2').text(value2).css({'left':offset2.left}); 
    } 

나는 데모 here습니다. 못 생겼지 만 기능적 이었어. 거품처럼 보이도록 도와 줄 수는있어.하지만 난 그래픽 녀석이 아니야. 희망이 당신을 시작 가져옵니다.

편집 - 슬라이더 자체에서 클릭 (드래그하지 않음)을 올바르게 추적하려면 애니메이션을 해제해야하는 것으로 나타났습니다. 슬라이더 막대 클릭 및 드래그를 모두 추적하는 데 필요한 변경 사항을 반영하도록 코드 및 데모가 업데이트되었습니다.

Answer 2

여기 간단한 방법이다 :

$('#slider').slider({ 
    range: true, 
    min: 0, 
    max: 10, 
    values: [0, 10], 
    create: function(){ 
    var handle = jQuery(this).find('.ui-slider-handle'); 
    var bubble = jQuery('<div class="valuebox"></div>'); 
    handle.append(bubble); 
    }, 
    slide: function(evt, ui) { 
    ui.handle.childNodes[0].innerHTML = ui.value; 
    } 
}); 

내 문제가 거품에 표시 초기 값을 얻을 것입니다, 나는 아직 문제가 해결합니다. 어떤 도움을 주셔서 감사합니다.

Answer 3

init 또는로드시이 블록을로드 할 수 있습니다 (초기 값으로 슬라이더가 페인트됩니다). 이것이 최선의 방법인지 확실하지 않지만 저에게는 효과적입니다.

$('#slider').slider({ 
    range: true, 
    min: 0, 
    max: 10, 
    values: [0, 10] 
});