javascript - 使用包含当前值的 float DIV 自定义 HTML 范围输入

Question

我想创建一个范围 slider ，它有一个 div 元素跟随范围拇指。此 div 元素将包含范围输入的当前值。我将如何着手做这样的事情？我研究了 slider 的样式，但不知道如何将实际元素添加到拇指上。它看起来像这样，请原谅我糟糕的绘画能力:

编辑:拖动 slider 时应更新以下 div。更新:我有一个很好的原型(prototype)，但似乎无法让它完美地跟随 slider 。它会偏离中心几个像素，具体取决于它在轨道上的位置。 Heres my codepen

更新代码

HTML

<div id="slider-cntnr">
  <input type="range" id="frame-slider" oninput="updateFollowerValue(this.value)"/>
  <div id="slider-follow">
    <div id="slider-val-cntnr">
      <span id="slider-val"></span>
    </div>
  </div>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
}

#slider-cntnr {
  width: 50%;
  margin: 40px;
  position: relative;
}

#frame-slider {
  width: 100%;
  margin: 0;
}

#slider-follow {
  margin-left: -14px;
  background-color: black;
  width: 30px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

#slider-val-cntnr {
  background-color: white;
  width: 25px;
  height: 20px;
}

JS

var follower = document.getElementById('slider-follow');
var follower_val = document.getElementById('slider-val');
var slider = document.getElementById('frame-slider');

var updateFollowerValue = function(val) {
  follower_val.innerHTML = val;
  follower.style.left = val + '%';
};

updateFollowerValue(slider.value);

Answer 1

如果您不支持旧浏览器，您可以利用

<input type="range"> 

和一些 JavaScript 来跟随它。查看我的代码笔:http://codepen.io/abhisharma2/pen/wMOpqz