在 JavaScript 中滑动时如何让滑块显示信息？答案

【问题标题】：How do you make a slider display information as you slide in JavaScript?在 JavaScript 中滑动时如何让滑块显示信息？
【发布时间】：2016-07-20 03:51:17
【问题描述】：

目前，我真正拥有的只是下面的代码，以及我使用 D3 javascript 库构建的一些 SVG。我希望能够在滑动时显示索引号（在我结束单击之前），这样我就不必猜测（注意有 10,000 个可能的索引）。我希望稍后我可以将它与 JSON 文件配对并获取实际值而不是数字，但现在，我真的知道如何简单地显示它们。（不在控制台上，而是在我的滑块上方/下方）

    <input type = "range" min="0" max="10000" value="0" step="1" id="slider"/>

    var ARR_INDEX = 0;
    $("#slider").on("change",function(){
        ARR_INDEX = $(this).val();
        updateData(ARR_INDEX);
        console.log(ARR_INDEX);
    });

【问题讨论】：

我在这个例子中做了这个。如果您看不到它，请告诉我，但来源也应该可以访问。 secure.scheduleinterpreter.com/bestinterpreters/wip/dashboard/… 我认为这是 Bostock 网站上某处的官方示例之一。祝你好运

标签： javascript jquery css d3.js svg

【解决方案1】：

使用 onmousemove 和 onmouseup 事件如下：

<!DOCTYPE HTML>

<html>

<head>
  <title>Slider value</title>
</head>

<body>

<input onmousemove=sliderChanged() onmouseup=setSliderValue() style='width:500px;' type = "range" min="0" max="10000" value="0" step="1" id="slider"/>
<span id=sliderValueSpan></span>

</body>
 <script>
 function sliderChanged()
 {
   sliderValueSpan.innerHTML=slider.value
 }
 function setSliderValue()
 {
  slider.value=sliderValueSpan.innerHTML
 }


 </script>
</html>

【讨论】：