JQueryUI Slider - 현재 위치에 대한 툴팁

Question

현재 슬라이더와 스크롤하는 위치에 따라 업데이트되는 작은 입력 텍스트 상자가 있습니다. 여기

는 자바 스크립트입니다 :

$("#slider").slider({ 
    value: 500, 
    min: 0, 
    max: 1000, 
    step: 50, 
    slide: function(event, ui) { 
     $("#budget").val(ui.value); 
    }, 
    change: function(event, ui) {} 
}); 
$("#budget").val($("#slider").slider("value"));​ 

그리고 여기에 HTML/CSS : 그것은 단지의 상단에있는 그림과 함께 작은 텍스트 상자를 가진 약간 이상하게 보이는 그러나

<input type="text" id="budget" style="width:50px;text-align:center"/> 

<div id="slider"></div>​ 

슬라이더, 그래서 그것의 가로 위치를 업데이 트하고 싶습니다 그래서 슬라이더 (.ui - 슬라이더 핸들)의 핸들 위에 가능하다면 - 일종의 툴팁처럼.

Answer 1

입력란이 필요하거나 텍스트를 표시하는 방법이 필요한지 잘 모르겠지만이 도구 설명은 jsFiddle example으로 표시 할 수 있습니다.

jQuery를

var tooltip = $('<div id="tooltip" />').css({ 
    position: 'absolute', 
    top: -25, 
    left: -10 
}).hide(); 
$("#slider").slider({ 
    value: 500, 
    min: 0, 
    max: 1000, 
    step: 50, 
    slide: function(event, ui) { 
     tooltip.text(ui.value); 
    }, 
    change: function(event, ui) {} 
}).find(".ui-slider-handle").append(tooltip).hover(function() { 
    tooltip.show() 
}, function() { 
    tooltip.hide() 
})​