How can i put my input field above my slider javascript

Question

I am making a rangeslider with an input field. The input field displays the value of the slider. I want the input field to be above the slider at all time. At this moment its only above the slider when its sliding. If you havent clicked it it will be on the left of the slider and i want it to be above the slider also if it isnt clicked yet.

<script type="text/javascript">
        jQuery(document).ready(function($) {
            $('#<?php echo $id; ?>').rangeslider({
                onSlide: function (position, value) {

                    var left = $('.rangeslider__handle').css('left');
                    var val  = $('input[type="range"]').val();

                    $('.floating-number-input').css({
                        'left': left,
                    });

                    // makes sure that the input has the value of the slider
                    $('.slider-input input[type="number"]').val( val );
                }
            }); 
        });
    </script>

How it is at this moment How it needs to be

Answer 1

After trying some stuff I found the solution. What worked for me was adding the next line of code. At the end of my function.

            $('#<?php echo $id; ?>').rangeslider('update', true);