Ползунок с возможностью ввода значений

$(function() { 
  $("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 1000, 
    values: [75, 300], 
    slide: function(event, ui) { 
      $("#price").val("$" + ui.values[0] + " - $" + ui.values[1]); 
    } 
  }); 
  $("#price").val("$" + $("#slider-range").slider("values", 0) + 
    " - $" + $("#slider-range").slider("values", 1)); 
  $("#price").on('input', function() { 
    let aRange = $(this).val().split(' - '); 
    $("#slider-range").slider({ 
      values: [aRange[0].replace(/\D/g, ''), aRange[1].replace(/\D/g, '')] 
    }); 
  }) 
});

<link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> 
<input class="form-control" name="price" id="price"> 
<div id="slider-range"></div>