2

現時点では、スライダーと、スクロールした場所に基づいて更新される小さな入力テキストボックスがあります。

これが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"));​

そしてここにhtml/cssがあります：

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

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

ただし、スライダーのすぐ上に図が表示された小さなテキストボックスがあるのは少し奇妙に見えるので、スライダーのハンドル（.ui-slider-handle）の上になるように水平位置を更新したいと思います。可能-一種のツールチップのように。

4

1 に答える 1

17

入力フィールドが必要なのか、単にテキストを表示する方法が必要なのかはわかりませんが、この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()
})​
于 2012-06-25T15:57:06.633 に答える