JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_108">
  <form method="post" enctype="multipart/form-data" target="gform_ajax_frame_108" id="gform_108" action="/apply/" novalidate="novalidate" autocomplete="off">

    <div class="gform_body">
      <div id="gform_page_108_1" class="gform_page page-one">
        <div class="gform_page_fields">
          <ul id="gform_fields_108" class="gform_fields top_label form_sublabel_below description_below">
            <li id="field_108_37" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible">
              <div class="ginput_container ginput_container_select" style="
  overflow: visible;
">
                <select name="input_37" id="input_108_37" class="medium gfield_select" tabindex="999" aria-required="true" aria-invalid="false">
                  <option value="1000">$1,000</option>
                  <option value="2000">$2,000</option>
                  <option value="3000">$3,000</option>
                  <option value="4000">$4,000</option>
                  <option value="5000">$5,000</option>
                  <option value="6000">$6,000</option>
                  <option value="7000">$7,000</option>
                  <option value="8000">$8,000</option>
                  <option value="9000">$9,000</option>
                  <option value="10000">$10,000</option>
                  <option value="11000">$11,000</option>
                  <option value="12000">$12,000</option>
                  <option value="13000">$13,000</option>
                  <option value="14000">$14,000</option>
                  <option value="15000">$15,000</option>
                </select>
                
            </li>
          </ul>
        </div>

      </div>
    </div>
  </form>
</div>


<div id='slider'></div>

CSS

body {
  margin: 50px;
}

.tooltip {
  position: absolute;
  z-index: 1020;
  display: block;
  padding: 5px;
  font-size: 11px;
  visibility: visible;
  margin-top: -2px;
  bottom: 120%;
  margin-left: -2em;
}

.tooltip .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top: 5px solid #000000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.ui-slider {
  background: black repeat-x bottom left;
  border-bottom: 1px solid #EBEAE5;
  height: 15px;
  margin: 0;
  padding: 0px;
}

.ui-slider-handle {
  background: #ED6B51;
  border-bottom: 1px solid #a8a79f;
  border-right: 1px solid #a8a79f;
  height: 20px;
  width: 10px;
  margin: 0;
  padding: 0px;
  display: inline-block;
}

.ui-slider-range {
  height: 10px;
  border-bottom: 3px solid red;
  position: relative;
}

.ui-slider-handle {
  background: #ED6B51 !important;
  border-bottom: 1px solid #a8a79f !important;
  border-right: 1px solid #a8a79f !important;
  height: 20px !important;
  width: 10px !important;
  margin: 0 !important;
  padding: 0px !important;
  display: inline-block !important;
  top: -4px !important;
}

JavaScript

var sliderTooltip = function( $select, index ) {
  var index = Math.max( 0, index );
  var curValue = $select.find( 'option' ).eq( index ).text()
  var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';

  $('.ui-slider-handle').html(tooltip); 

}

$( function() {

    var $select = $( "#input_108_37" );
    var $slider = $( "<div id='slider'></div>" )
        .insertAfter( $select ).slider({
            min: 1,
            max: $select.find( 'option' ).length,
            range: "min",
            value: $select[ 0 ].selectedIndex,
            slide: function( event, ui ) {
        	    $select[ 0 ].selectedIndex = ui.value - 1;
        			sliderTooltip( $select, ui.value - 1 );
      			}
    		} );

		$select.on( "change", function() {
			$slider.slider( "value", this.selectedIndex + 1 );
    } );
   
		sliderTooltip( $select, $select[ 0 ].selectedIndex );
   
} );