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.