Customizing HTML range input with a floating DIV t

Question

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:

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. Heres my codepen

UPDATED CODE

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

Basically ypu can go with something like this:

Important points are;

Don't forget to position your wrapper as relative. Give your following badge absolute position, and for centering, negative margin-left value as your badge's width / 2. (If your badge is 50px, give margin-left -25px); Range slider must has 100% width.

HTML:

<div class="range-slider">
    <input type="range" min="0" max="100" step="1" />
    <div class="range-badge"></div>
</div>

CSS:

.range-slider{
    position: relative;
    width: 200px;
}

.range-slider > input.range{
  width: 100%;
}

.range-slider > .range-badge{
    position: absolute;
    left: 0%;
    top: 20px;
    background: #000;
    color: #fff;
    width: 20px;
    text-align: center;
    margin-left: -10px;
    padding: 5px 0;
}

JS:

$(document).ready(function(){
    var badge = $('.range-badge');

  $('.range').on('change', function(){
    var current = $(this).val();

    badge.text(current).animate({
      'left': current+'%'
    });
  });
});

Test here: https://jsfiddle.net/dmnzugh8/6/

Answer 2

If you're not supporting old browsers, you can take advantage of the

<input type="range"> 

and some JavaScript to follow it along. See my Codepen: http://codepen.io/abhisharma2/pen/wMOpqz

Answer 3

An example with custom output

It's updating while you drag the input.

var el, newPoint, newPlace, offset;
 
$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});
// Select all range inputs, watch for change
$("input[type='range']").change(function() {

 // Cache this for efficiency
 el = $(this);
 
 // Measure width of range input
 width = el.width();
 
 // Figure out placement percentage between left and right of input
 newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));
  
  offset = -1;

 // Prevent bubble from going beyond left or right (unsupported browsers)
 if (newPoint < 0) { newPlace = 0; }
 else if (newPoint > 1) { newPlace = width; }
 else { newPlace = width * newPoint + offset; offset -= newPoint; }
 
 // Move bubble
 el
   .next("output")
   .css({
     left: newPlace,
     marginLeft: offset + "%"
   })
     .text(el.val());
 })
 // Fake a change to position bubble at page load
 .trigger('change');

output { 
  position: absolute;
  background-image: linear-gradient(#444444, #999999);
  width: 40px; 
  height: 30px; 
  text-align: center; 
  color: white; 
  border-radius: 10px; 
  display: inline-block; 
  font: bold 15px/30px Georgia;
  bottom: 175%;
  left: 0;
  margin-left: -1%;
}
output:after { 
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #999999;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
form { 
  position: relative; 
  margin: 50px;
}
body {
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<input type="range" name="foo" min="0" max="100">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>

<form>
<input type="range" name="foo" min="0" max="100" style="width: 300px;">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>

<form>
<input type="range" name="foo" min="0" max="100">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
</form>

reference https://css-tricks.com/value-bubbles-for-range-inputs/