Customizing HTML range input with a floating DIV that contains current value
<p>I'd like to create a range slider that has a div element follow the range thumb. This div element would contain the current value of the range input. How would I go about doing something like this? I've looked into styling the slider but don't know how I could add an actual element onto the thumb. It would look something like this, excuse my terrible drawing abilities:<a href="https://i.stack.imgur.com/8O5Lh.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/8O5Lh.jpg" alt="enter image description here"></a></p>

<p>Edit: The following div should update while slider is being dragged.
UPDATE: I got a pretty good prototype going but cant seem to get it to follow the slider perfectly. It gets off center by a few pixels depending on where it is along the track. <a href="http://codepen.io/danielyaa5/pen/MKxOZJ" rel="noreferrer">Heres my codepen</a></p>

<h1>UPDATED CODE</h1>

<h2>HTML</h2>

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

<h2>CSS</h2>

<pre><code>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;
}
</code></pre>

<h2>JS</h2>

<pre><code>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);
</code></pre>