0

ユーザーがスライダーをドラッグしているときにスライダーの現在の値を示すラベルを JQuery スライダーに追加することについて、この StackOverflow の質問と同様の設計目標があります。これらの回答で私が抱えている問題はslide、スライダーが新しい場所に移動しようとしているときにイベントがトリガーされ、uiオブジェクトに新しい値が提供されることです。まあ、良いのですが、把握する方法を見つけることができるスライダーの唯一の位置は、新しい場所ではなく、古い場所です。スライダーに十分なステップがあると、これはあまり目立ちませんが、ステップ数を減らすと、スライド ハンドルがあった場所の横にラベルが表示されることがわかります。

問題を説明するために、他の質問から jsFiddle を更新しました: http://jsfiddle.net/mcuf6/2/

では、tl;dr: スライド イベント中にスライダー ハンドルの最終的な位置を取得することで、ユーザーがハンドルをドラッグしている間にスライダー ラベルを描画する際の遅延を回避するにはどうすればよいでしょうか?

4

1 に答える 1

2

編集：この小さなハックはあなたが必要なことを正確に行う必要があります

$(document).ready(function() {
    $("#slider").slider({
        value:0,
        min: 0,
        max: 5,
        step: 1,
        range: 'min',
        slide: function( event, ui ) {
            var that = $(this);
            setTimeout(function() {
            var offsetLeft = that.find(".ui-slider-handle").offset().left;
            $( "#sliderValue" )
                .val( ui.value )
                .css({
                    "position": "absolute",
                    "left": offsetLeft
                });
        },1);
        }
    });
});​

http://jsfiddle.net/mcuf6/6/

于 2012-11-13T13:44:23.660 に答える