javascript - jQuery UI スライダーが Google マップの InfoBubble.js で正しく機能しない

Question

Google マップのinfobubble.jsで jQuery UI スライダーを使用しようとしていますが、問題が発生したようです。情報バブル ウィンドウ内のスライダーをクリックしてドラッグしようとすると、動作しないようです。ただし、スライダー ハンドルをクリックし、マウス カーソルをウィンドウの外に移動して上下にドラッグすると、問題なく動作します。ここで JSFiddle を参照してください。コードを以下に示します。

var mapCenter = new google.maps.LatLng(-35.397, 150.644);
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-35, 150),
    draggable: true
});
var bubble = new InfoBubble({
    maxWidth: 300,
});
bubble.addTab("", "<div id='slider' style='height: 100px;'></div>");

google.maps.event.addListener(marker, 'click', function () {
    google.maps.event.addListener(bubble, 'domready', function () {
        setTimeout(function () {
            $("#slider").slider({
                orientation: "vertical",
                range: "min",
                min: 0,
                max: 80,
                value: 60,
                slide: function (event, ui) {
                    $("#value").html(ui.value);
                }
            });
        }, 200);
    });
    bubble.open(map, marker);
});

この問題をデバッグする方法がわかりません。何らかのクリックイベントに関連していますか？