How to create a floating element over input type range

Question

I need span#a to translate to the same position on where slider thumb is. I need to somehow use transform: translateX(and_step_to_translate_here) . So to say a bit easier, I need span#a to follow the track thumb. How can I do it?

 input {width: 90%;} 

 <input type="range" min="0" max="100" step="1"/><br/> <span id="a">I'm following.</span> 

Answer 1

https://jsfiddle.net/2cc83shx/2/

$( document ).ready( function() {
    $( '#rangeInput' ).on( 'change', function() {
        $( '#a' ).css({
            'transform': 'translateX(' + $(this).val() + 'px)'
        })
    })
})

I can help a bit. you can positioning it a bit better later from my fiddle. (here, I'm using jquery to select the element. you can use pure js to do this too)

*UPDATE

If you want it to follow whenever you drag the range, follow the code below

https://jsfiddle.net/2cc83shx/3/

Answer 2

What I can suggest is to use input range oninput event to follow the value of the input and use a proportional margin-left with this value .

Here's the code you need:

$('input[type="range"]').on('input', function() {
  $('span#a').css('margin-left', parseInt($(this).val() - 10) > 0 ? parseInt($(this).val() - 10) + '%' : '0px');
});

Demo:

 $('input[type="range"]').on('input', function() { $('span#a').css('margin-left', parseInt($(this).val() - 10) > 0 ? parseInt($(this).val() - 10) + '%' : '0px'); }); 

 input { width: 90%; } span#a { display: block; width: auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="range" min="0" max="100" step="1" value="0" /> <span id="a">I'm following.</span> 

Note:

• This will update the span left margin to be proportional to value of the range , so it will be updating between 0% to 100% , which gives it the floating effect.

• In the following sample Demo, the margin-left value needs more
  adjusting so it will give a better result. The logic is there, but
  needs just some adjustment.