ブートストラップスライダでマウスの位置にツールヒント値を表示する方法

Question

ブートストラップスライダで再生機能を実装しようとしています。値は時間を表します。それはうまく動作します。

私は、ホバーのツールチップが必要です。 スライダハンドルを移動すると、ツールチップには指定された位置の値が表示されます。しかし、スライダをクリックする前にマウスを動かすと、新しい値に対するフィードバックはありません。

イベントをホバーに付加して値を取得する方法はありますか？

Answer 1

私の問題にハックが見つかりました。私は2つの文書化されていない関数_getPercentageと_toValueを使用するので、安定していません。 文書化されていない関数にアクセスするには、非jqueryの使用法に変更する必要があります。追加の機能がいくつかあります。スライダの操作中にSliderUpdateEnabledでスライダの更新をオフにすることができます。また、スライダハンドラの移動中にmousemoveイベントをオフにすることができます。トリッキーな部分はmousemoveイベントです。

var slider = new Slider("#replaySlider", { 
    formatter: function(value) { 
     return moment(value).format("MM.DD. HH:mm:ss"); 
    } 
}); 
this.slider = slider; 
slider.on('slideStart', function() { 
    sm.controller.setSliderMove(true); 
    sm.controller.setSliderUpdateEnabled(false); 
});   
slider.on('slideStop', function() { 
    var value = slider.getValue(); 
    sm.controller.setPlaybackTime(value); 
    sm.controller.setSliderUpdateEnabled(true); 
    sm.controller.setSliderMove(false); 
});   

$(".slider-track").on("mousemove",function(evt) { 
    if (sm.controller.isSliderMove()) { 
     return; 
    } 
    sm.controller.setSliderUpdateEnabled(false); 
    // gets the percentage from the pointer event 
    var percent = slider._getPercentage(evt) 
    // moves the tooltip to the pointer position 
    $(".replayShow").find(".tooltip-main").css("left", percent+"%"); 
    // updates the text in the tooltip 
    $(".replayShow").find(".tooltip-inner").html(moment(slider._toValue(percent)).format("MM.DD. HH:mm:ss")); 
}); 
$(".slider-track").on("mouseout",function(evt) { 
    if (sm.controller.isSliderMove()) { 
     return; 
    }    
    sm.controller.setSliderUpdateEnabled(true); 
}); 

期待どおりに動作します。