如何在Bootstrap滑块

Question

我尝试使用bootstrap滑块实现重放功能。值代表时间。它运作得很好。

我需要一个悬停工具提示。 移动滑块手柄时，工具提示会显示给定位置的值。但是，当您在滑块上单击之前将鼠标悬停在鼠标上时，没有对新值的反馈。

有没有办法将事件附加到悬停并获取值？

Answer 1

我发现了我的问题。它不稳定，因为我使用了两个未记录的函数_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);
});

现在按预期工作。