Put a balloon on top of the input [type = range]

I'm generating a form from a php, it generates an html like this:

<div class="mf_slider">
  <div class="mf_slider_label">Você tem cabelos brancos?</div>
  <div class="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
  </div>
  <input type="range" min="0" max="3" value=0 step="0.1">
  <div class="mf_slider_content">
    <input class="mf_option" type="hidden" name="mf[gray_hair#slider][]" id="id_0" value="Não">
    <input class="mf_option" type="hidden" name="mf[gray_hair#slider][]" id="id_1" value="Um Pouco">
    <input class="mf_option" type="hidden" name="mf[gray_hair#slider][]" id="id_2" value="Médio">
    <input class="mf_option" type="hidden" name="mf[gray_hair#slider][]" id="id_3" value="Muito">
  </div>
</div>

What I want to do is to have the value appear on the top of the range button, with the id of input in div.class="mf_slider_content" .

To help I'm putting this codeopen . If anyone knows how to do this.

UPDATE

Well, I managed to do it, but the balloon does not point correctly to the knob of the range. If anyone can fix this for me, I thank them immensely.