添加工具提示當前.VAL到nouislider

Question

目前我有一個項目（codepen） - http://codepen.io/sturobson/pen/70f2fd8d19fdc76f136f905146218328 使用該nouislider - http://refreshless.com/nouislider/

我找到了工作，我想怎樣，但需要增加一個工具提示它顯示這個滑塊的當前.val。

我目前得到

$('#sample-showcase').noUiSlider({ 
    range : [40,500], 
    start : 180, 
    step : 10, 
    handles : 1, 
    slide : function() { 
    $('.noUi-handle').append('<span class="tooltip"><span data-replace=".length-slider"></span> Months</span>'); 
    $('[data-replace]').each(function() { 
     var replacer = $(this).data('replace'); 
     var text = $(replacer).val(); 
     $(this).text(text); 
    }); 
    } 
}); 

其中滑動位我有被追加的跨度。

這工作正常，但我不能得到 a）要顯示的值和b）更新而不是不斷重複附加。

我真的很苦惱，任何指針將不勝感激。

Answer 1

試試這個：

JS：

$slider = $('#sample-showcase').noUiSlider({ 
    range : [40,500], 
    start : 180, 
    step : 10, 
    handles : 1 
} 

$tooltip = $('<div class="noUi-value" />') 
handle = $slider.data('base').data('handles')[0] 
handle.append($tooltip); 

和CSS

.noUi-value { 
    display: none; 
    position: absolute; 
    top: -21px; 
    left: -20px; 
    width: 60px; 
    font: bold 10px Verdana; 
    text-align: center; 
} 
.noUi-active+.noUi-value, .noUi-state-tap .noUi-value { 
    display: block; 
}