I try to implement a replay function with bootstrap slider. The values represent time. It works just fine.
I need a hover tooltip. When you move the slider handle the tooltip shows the value for the given position. But when you hover the mouse before a click on the slider there is no feedback for the new value.
Is there any way to attach an event to the hover and get the value back?
I found a hack to my problem. It is not stable as I use two non documented function _getPercentage, and _toValue. I have to change to the non jquery usage, to access the non documented functions. There is some additional functionality. I can switch off the update of the slider with SliderUpdateEnabled during slider manipulation. And I can switch off the mousemove event during slider handler movement. The tricky part is in the mousemove event.
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);
});
It works now as expected.