显示悬停在输入范围上的时间

Question

你知道youtube上的东西，当你将鼠标悬停在搜索滑块的某个部分时，它会显示你正在悬停的时间码。我想获取该值并将其显示在此滑块的title属性中。我该怎么办？

<input type="range" min="0" max="100" step="1" title="javascript:hoverTimeFunction()"/>

这就是我需要的： 你看，那个视频当前时间是 2:04 但是我在 3:27 时间码上徘徊，它显示我 3:27 标题中的值而不拖动拇指。但问题是我需要显示视频时间，而不仅仅是滑块值。我有时间使用这个功能：

seekSlider = document.getElementById("seekSlider");

function videoTimeUpdate(){
"use strict";
  var timeInterval = vid.currentTime * (100 / vid.duration);
  seekSlider.value = timeInterval;
  var currentMinutes = Math.floor(vid.currentTime / 60);
  var currentSeconds = Math.floor(vid.currentTime - currentMinutes * 60);
  var durationMinutes = Math.floor(vid.duration / 60);
  var durationSeconds = Math.floor(vid.duration - durationMinutes * 60);
  if(currentSeconds < 10) {currentSeconds = "0"+ currentSeconds;}
  if(durationSeconds < 10) {durationSeconds = "0"+ durationSeconds;}
  if(currentMinutes < 10) {currentMinutes = "0"+ currentMinutes;}
  if(durationMinutes < 10) {durationMinutes = "0"+ durationMinutes;}
    currentTime.innerHTML = currentMinutes + ":" + currentSeconds; 
  vidDuration.innerHTML = durationMinutes + ":" + durationSeconds;
}

顺便说一句，我需要一个不使用jQuery的解决方案。

Answer 1

收听滑块上的stack-build事件以更改标题属性。

这是一个例子。

input

var slider = document.querySelector('input[type="range"]');

// set the initial value
slider.title = slider.value;

// add listener to input event
slider.addEventListener('input', function(e) {
	e.target.title = e.target.value;
})

Answer 2

这是一个纯粹的javascript + css解决方案。只有一个问题：除非你将滑块放大，否则显示的数字不会是它在滑块上设置的实际值，如果你点击它。这是因为鼠标所在的坐标与滑块在该位置设置的值不对应。

＆＃13;

＆＃13;

var slider = document.getElementById("slider");
var slidertitle = document.getElementById("slidertitle");

var sliderOffsetX = slider.getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
var sliderOffsetY = slider.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top;

var sliderWidth = slider.offsetWidth - 1;

slider.addEventListener('mousemove', function(event) {
  var currentMouseXPos = (event.clientX + window.pageXOffset) - sliderOffsetX;
  var sliderValAtPos = Math.round(currentMouseXPos / sliderWidth * 100 + 1);
  // this...
  if(sliderValAtPos < 0) sliderValAtPos = 0;
  // ... and this are to make it easier to hover on the "0" and "100" positions
  if(sliderValAtPos > 100) sliderValAtPos = 100;
  slidertitle.innerHTML = sliderValAtPos;
  slidertitle.style.top = sliderOffsetY - 15 + 'px';
  slidertitle.style.left = currentMouseXPos + 'px';
});

＆＃13;

#slider {
  margin-top: 10px;
}

#slidertitle {
  display: none;
  position: absolute;
  cursor: default;
  top: 0;
  left: 0;
}

#container:hover > #slidertitle {
  display: block;
}

＆＃13;

<div id="container">
  <input type="range" min="0" max="100" step="1" id="slider"/>
  <span id="slidertitle"></span>
</div>

＆＃13;

＆＃13;

＆＃13;