JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/high-density-data"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<script id="cityTemplate" type="text/x-jquery-tmpl">
        <table>
            <tr><td class="tooltipHeading" colspan="2">${item.name}</td></tr>
        </table>
    </script>

<div id="map"></div>
    <br/>
    
    <div>
        <fieldset id="chartOptions">
            <legend>Map Options</legend>
            <br />            
            <div class="optionContainer">
                Resolution
                <br />
                <div id="resolutionSlider" class="sliderBounds"></div>
                <label id="resolutionLabel">0</label>
            </div>
           
           <div class="optionContainer">
                Minimum Heat Value
                <br />
                <div id="minimumHeatValueSlider" class="sliderBounds"></div>
                <label id="minimumHeatValueLabel">0</label>
            </div>
            <div class="optionContainer">
                Maximum Heat Value
                <br />
                <div id="maximumHeatValueSlider" class="sliderBounds"></div>
                <label id="maximumHeatValueLabel">5</label>
            </div>

            <br />

            <div class="optionContainer">
                Point Extent
                <br />
        ...

CSS

.sliderBounds {
    	   width: 95px;
    	   margin: 6px 3px 6px 6px;
			display: inline-block;
    	}
    	.optionContainer {
    	   width: 200px;
    	   margin: 2px;
			padding: 2px;
			display: inline-block;
			border: 1px solid #e0e0e0;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			border-radius: 4px;
    	}
    	.selectBounds {
    	   min-width: 120px;
    	   max-width: 132px;
    	}

JavaScript

$(function () {
            $("#map").igMap({
                width: "700px",
                height: "500px",
                backgroundContent: {
                    type: "openStreet"
                },
                series: [{
                    type: "geographicHighDensityScatter",
                    name: "australiaMap",
                    dataSource: placeData,
                    latitudeMemberPath: "lat",
                    longitudeMemberPath: "lon",
                    heatMinimum: 0,
                    heatMaximum: 5,
                    mouseOverEnabled: true,
                    showTooltip: true,
                    tooltipTemplate: "cityTemplate"
                }],
                windowRect: {
                    left: 0.7,
                    top: 0.52,
                    width: 0.127,
                    height: 0.127
                }
            });
            $("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='https://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
        // Resolution
        $("#resolutionSlider").slider({
            min: 0,
            max: 10,
            value: 0,
            slide: function (event, ui) {
                $("#map").igMap("option", "series", [{ name: "australiaMap", resolution: ui.value}]);
                $("#resolutionLabel").text(ui.value);
            }
        });
      
        // Minimum Heat Value
        $("#minimumHeatValueSlider").slider({
            min: 0,
            max: 5,
            value: 0,
            slide: function (event, ui) {
                $("#map").igMap("option", "series", [{ name: "australiaMap", heatMinimum: ui.value }]);
                $("#minimumHeatValueLabel").text(ui.value);
            }
        });

        // Maximum Heat Value
        $("#maximumHeatValueSlider").slider({
            min: 5,
            max: 10,
            value: 10,
            slide: function (event, ui) {
               ...