JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.0.16/css/bootstrap-slider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.0.16/bootstrap-slider.min.js"></script>

<input id="myTextBox" type="text" value="1" />

<br><br>
              
  <div id="slider_box">
  
       <input id="ex1"  data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="10000" data-slider-step="10" data-slider-value="0" data-slider-tooltip="show" data-slider-tooltip-position="bottom" />         
       
 </div>

CSS

#slider_box {
  padding:20px;
}

JavaScript

$("#ex1").slider({});
      
      $("#myTextBox").bind("change paste keyup", function() {
      	  	$("#ex1").slider('setValue',this.value);
      });