JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider"></div>

<input id="min" readonly>    
<input id="max" readonly>

CSS

body { font-family: Arial; }
body > * { margin: 10px; }

JavaScript

$('#slider').slider({
    min: 0,
    max: 100,
    range: true,
    values: [ 10, 50 ],
    change: function( evt, el ){
        var min = el.values[0],
            max = el.values[1]
        log('Faire appel ajax : min='+min+', max='+max);
    },
    slide: function( evt, el ){
        $('#min').val( el.values[0] );
        $('#max').val( el.values[1] );
    }
});


// affichage console
function log(value){    
    $('#log').html( value );
}
$('body').append( $('<div id="log" />') );