JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap</title>
        <meta charset="UTF-8">
        <!-- jQuery -->
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

    </head>
    <body>

        <input type="text" id="amount" name="rating-slider" style="border: 0; color: #f6931f; font-weight: bold;" /><br/>
        <div id="slider-range"></div>

        
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

    </body>
</html>

JavaScript

$(document).ready(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 1,
        max: 100,
        values: [ 1, 100 ],
        slide: function( event, ui ) {
            $( "#amount" ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ] );
        }  
    });
    
    $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
    " - " + $( "#slider-range" ).slider( "values", 1 ) );
    
    
    $("body").click(function(e) {
       alert('test');
    });
    
    

});