title: Customizing HTML range input with a floating DIV that contains current value
body: <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>