悬停时显示输入范围值答案

【问题标题】：Show input range value on hover悬停时显示输入范围值
【发布时间】：2016-12-28 10:36:12
【问题描述】：

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

&lt;input type="range" min="0" max="100" value="0" step="0.1" style="width:100%"&gt;

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

【问题讨论】：

标签： html input hover range

【解决方案1】：

你可以看demo，它可能对你有帮助..

<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

【讨论】：

【解决方案2】：

为了简单的展示，可以使用html的“title”属性。就像这样：

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

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

【讨论】：

【解决方案3】：

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

注意它不是 100% 准确的。

 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;
    }

    <div id='scrubberContainer'>
    <p id='tooltip'>0</p>
    <form oninput="x.value=parseInt(scrubber.value)">
    <input type="range" id="scrubber" value="50" max="100" onmousemove="showTooltip(event)" >
    <output id="x" name="x" for="a"></output>
    </form>
    </div>

【讨论】：