JSFiddle - React, Tailwind, and code Playground

by leongersen

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" style="margin: 50px;"></div>

CSS

.noUi-handle {
    position: relative;
}
.noUi-inner {
    display: block;
    width: 40px;
    text-align: center;
    position: absolute;
    bottom: 50px;
    border: 1px solid #ccc;
    
    font: 400 11px/20px Arial;
}

JavaScript

var start = ['20.00', '30.00'];

$('.slide')
    .noUiSlider({
         range: [10, 40]
        ,start: start
        ,connect: true
        ,handles: 2
        ,slide: function(){
            
            var values = $(this).val();
            
            $(this).find('.noUi-inner')
            .each(function( index, item ){
                $(item).html( values[index] );
            });
        }
    })
    .find('.noUi-handle').each(function(i){
        $('<div/>').appendTo($(this))
            .addClass('noUi-inner')
            .text(start[i]);
    });