Как я могу поставить поле ввода над ползунком javascript

Question

Я делаю ползунок с полем ввода. В поле ввода отображается значение ползунка. Я хочу, чтобы поле ввода всегда было над ползунком. На данный момент его только над слайдером, когда он скользит. Если вы не нажали на него, он будет слева от ползунка, и я хочу, чтобы он был над ползунком, если он еще не нажат.

<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>

Как это в данный момент Как это должно быть

Answer 1

Попробовав некоторые вещи, я нашел решение. Для меня работало добавление следующей строки кода. В конце моей функции.

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