No momento eu tenho um controle deslizante e uma pequena caixa de texto de entrada que atualiza com base em onde você rola nele.

Aqui está o javascript:

$("#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"));​

E aqui está o html / css:

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

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

No entanto, parece um pouco estranho ter a pequena caixa de texto com a figura apenas no topo do controle deslizante, então eu gostaria que ele atualizasse sua posição horizontal para que fique acima da alça do slider (.ui-slider-handle) se possível - como uma espécie de dica de ferramenta.