How to link text box inputs with sliders using Bootstrap-slider

Question

I have figured out how to adjust my tooltips and customize my sliders but I am now trying to have text inputs that show the values of the min and max values and then can be updated with the inputs by the user. Since there isn't anything similar online, I have no idea where to start.

I have tried using textboxes but I have no idea on how it would work with jQuery.

It should update the slider based on any input and the value should always change whether it is the min-value or max-value.

(function($) {
  $(document).ready(function() {
    $('.input-range').each(function() {
      var value = $(this).attr('data-slider-value');
      var separator = value.indexOf(',');

      if (separator !== -1) {
        value = value.split(',');
        value.forEach(function(item, i, arr) {
          arr[i] = parseFloat(item);
        });
      } else {
        value = parseFloat(value);
      }

      $(this).slider({
        formatter: function(value) {
          console.log(value);
          return '$ ' + value + ' cm';
        },
        min: parseFloat($(this).attr('data-slider-min')),
        max: parseFloat($(this).attr('data-slider-max')),
        range: $(this).attr('data-slider-range'),
        value: value,
        tooltip_split: $(this).attr('data-slider-tooltip_split'),
        tooltip: $(this).attr('data-slider-tooltip')
      });
    });
  });
})(jQuery);

.container {
  margin-top: 20px;
}

.slider-selection {
  background: #198294 !important;
}

.slider-track-high {
  background: #D9D9D6 !important;
}

.slider-track-low {
  background: #D9D9D6 !important;
}

.slider.slider-horizontal {
  width: 100% !important;
  height: 6px;
}

.slider-handle {
  background-color: #fff !important;
  background-image: none !important;
  width: 24px;
  height: 24px;
  border: 20px solid #198294;
  box-sizing: border-box;
}

.slider .tooltip.top {
  margin-top: -45px !important;
  margin-left: 2px;
}

.slider .tooltip-inner {
  white-space: nowrap;
  background-color: white;
  color: #747679;
  font-family: TT Norms;
  border: 1px solid #198294;
  border-radius: 0px;
}

.slider .tooltip.top .tooltip-arrow {
  border-top-color: #198294 !important;
}

.well {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  padding: 0;
}

.slider-ghost .slider-track {
  height: 6px !important;
}

.slider-ghost .slider-handle {
  top: -5px !important;
  width: 24px;
  height: 24px;
  border: 2px solid #198294;
  box-sizing: border-box;
}

.slider-primary.slider-ghost .slider-handle {
  border-color: #198294;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="range.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/fd9dba5260.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6" style="margin-top: 75px;">
      <div class="slider-wrapper slider-primary slider-strips slider-ghost">
        <input class="input-range" type="text" data-slider-step="1" data-slider-value="14, 75" data-slider-min="0" data-slider-max="100" data-slider-range="true" data-slider-tooltip_split="true" data-slider-tooltip="hide" />
      </div>
    </div>
  </div>
</div>