在悬停时显示输入范围值

Question

如何在鼠标悬停时显示此输入的值（光标位置）？ 悬停在输入的中间应该（例如文档附加）值：50 ...

<input type="range" min="0" max="100" value="0" step="0.1" style="width:100%">

很好的例子是Youtube视频进度条:(红线代表鼠标位置）

Answer 1

你可以看到演示，它可能对你有帮助..

<label>RATE CARD<input type="range" name="rate" id="ageInputId" min="1" max="5" oninput="ageOutputId.value = ageInputId.value"></label>
<output name="ageOutputName" id="ageOutputId">0</output>
<span>/5</span>

https://codepen.io/Jackmaurya/pen/GNabvV

Answer 2

对于简单演示，可以使用html“ title”属性。 就是这样：

$(".slider").change(function(){
  $(this).attr("title", $(this).val());
});

我正在使用“滑块”类来获取所有范围输入。

Answer 3

您可以使用 MouseEvent: offsetX 获取 x 位置，使用 clientWidth 获取输入范围宽度。获取输入范围最大值（！重要：您必须设置它，否则它将为 0）并计算鼠标位置值。 使用工具提示显示结果。

请注意，它不是 100% 准确的。

Traceback (most recent call last):

  File "<ipython-input-12-87021414c9f9>", line 1, in <module>
    fill_resources()

  File "C:/Users/valen/OneDrive/Bureau/DOCARET/tous les tests/testcontracts.py", line 63, in fill_resources
    c.execute("INSERT OR UPDATE INTO RESOURCES (BoondID,lastName,firstName,dateOfBirth,placeOfBirth,address,postcode,town,country,email1,email2,phone1,phone2,administrativeComments,title,mainManager,agency,healthCareNumber,diplomas,state) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)", values)

OperationalError: near "UPDATE": syntax error

 let x = document.getElementById('x')
    let scrubber = document.getElementById('scrubber')
    let tooltip = document.getElementById('tooltip')

    function showTooltip(e) {
        let w = scrubber.clientWidth;
        let x = e.offsetX;
        let percents = x / w;
        let max = parseInt(scrubber.max)
        tooltip.innerHTML = Math.floor(percents * max + 0.5) 
    }

    window.onmousemove = function (e) {
        let x = (e.clientX + 20) + 'px';
        tooltip.style.left = x;
    }

  #scrubber {
      width: 90%
    }
    #tooltip {
      display:none;
      position:relative;
    }
    #scrubberContainer:hover p {
      display:block;
      position:fixed;
      overflow:hidden;
    }