JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://refreshless.com/nouislider/source/jquery.nouislider.js"></script>
<link rel="stylesheet" href="http://refreshless.com/nouislider/source/jquery.nouislider.css">
<div class="slide"></div>

CSS

.noUi-handle {
    position: relative;
}
.noUi-inner {
    display: block;
    width: 100%;
    position: absolute;
    bottom: -40px;
    height: 100%;
    text-align: center;
    font: 400 11px/40px Arial;
}
.noUi-active:after {
    display: none;
}

JavaScript

$('.slide')

    // Initialize noUiSlider
    .noUiSlider({
         start: [10, 40]
        ,range: [10, 40]
        ,connect: true
        ,handles: 2
        ,set: function(){
        
            // Get the values from the slider,
            // and find the html elements
            var  values = $(this).val()
                ,inner = $(this).find('.noUi-inner');
            
            // Loop the elements, and write the proper
            // value to each handle.
            inner.each(function( index, item ){
                $(item).html( values[index] );
            });
        
        }
    })
    
    // Find the handles and add some html to each.
    .find('.noUi-handle').each(function(){
    
        $('<div/>').appendTo($(this)).addClass('noUi-inner');
    
    })

    // Return to the slider and trigger the 'set'
    // callback so the slider displays its values right away.
    .end().val([20,30], true);