JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Slider - Colorpicker</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
</head>
<body class="ui-widget-content" style="border: 0;">
 
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding: 4px;">
    <span class="ui-icon ui-icon-pencil" style="float: left; margin: -2px 5px 0 0;"></span>
    Simple Colorpicker
</p>
 
<p>
    <label for="amount-1">Range 1:</label>
    <input type="text" id="amount-1" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="1" style=" width: 400px;"></div>
    
<p>
    <label for="amount-2">Range 2:</label>
    <input type="text" id="amount-2" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="2" style=" width: 400px;"></div>
 
 
</body>
</html>

JavaScript

$(document).ready(function() {
   
    $("#1, #2" ).slider({
        range: true,
        min: 1,
        max: 99,
        values: [ 1, 99 ],
        slide: function( event, ui ) {
            
            $( "#amount-" + $(this).attr("id") ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ] );
            $( "#amount-" + $(this).attr("id") ).val(ui.values[ 0 ] + " - " + ui.values[ 1 ] );
            
            
        }        
    });
    
   $( "#amount-1" ).val($( "#1" ).slider( "values", 0 ) +
    " - " + $( "#1" ).slider( "values", 1 ) );
    $( "#amount-2" ).val($( "#2" ).slider( "values", 0 ) +
    " - " + $( "#2" ).slider( "values", 1 ) );
});