JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://codeorigin.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
                <div class="compare-unit select niceform">
                    <ul class="simple">
                        <li class="slider-unit align-c">
                              <label for="amount" class="stacked">Amount Range</label>
                              
                              <div id="slider-range" class="slider-control"></div>
                              
                              <div>
                                  <span id="range-bottom" class="range-value"></span> to <span id="range-top" class="range-value"></span>
                              </div>
                        </li>
                    </ul>
                    <table class="select-list smaller" id="example">
                        <thead>
                            <tr>
                                <th>Amt</th>
                                <th>Company</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>

CSS

ul { list-style: none;}
li {margin: 1em 0; text-align: center;}
.slider-control {margin: 1em 0;}

JavaScript

var data = [
        [1000000, "Company A"],
        [62000000, "Company B"],
        [60000000, "Company C"],
        [80000000, "Company D"],
        [76000000, "Company E"],
        [64000000, "Company F"],
        [70000000, "Company G"],
        [75000000, "Company H"],
        [78000000, "Company I"],
        [60000000, "Company J"],
        [66000000, "Company K"],
        [20000000, "Company L"],
        [6000000, "Company M"],
        [11000000, "Company N"],
        [5000000, "Company O"],
        [160000000, "Company P"],
        [15000000, "Company Q"]
    ];

 $.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
        var iColumn = 0;
        var iMin = rangeSlider.slider("values", 0);
        var iMax = rangeSlider.slider("values", 1);
         
        var iVersion = aData[iColumn] == "-" ? 0 : aData[iColumn]*1;
        if ( iMin == "" && iMax == "" )
        {
            return true;
        }
        else if ( iMin == "" && iVersion < iMax )
        {
            return true;
        }
        else if ( iMin < iVersion && "" == iMax )
        {
            return true;
        }
        else if ( iMin < iVersion && iVersion < iMax )
        {
            return true;
        }
        return false;
    }
); 

var oTable = $('#example').dataTable();

var rangeSlider = $( "#slider-range" )

var initRangeSlider =  function(){
    rangeSlider.slider({
       range: true,
       min: 100,
       max: 150,
       step: 10,
       values: [ 120, 150 ],
       slide: function( event, ui ) {
           $('#range-bottom').text(ui.values[ 0 ]);
           $('#range-top').text(ui.values[ 1 ]);
       },
       stop: function(event, ui) {
           alert(ui.values[ 0 ] + " - " + ui.values[ 1 ]);
           oTable.fnDraw();
       }
    });
    
    var rangeBottom = rangeSlider.slider("values", 0);
    var rangeTop = rangeSlider.slider("values", 1);
    
    $('#range-bottom').text(rangeBottom);
   ...