There is a regular slider on jQuery Ui .slide (). But it is required that would react to data entry manually. Now if you enter data in the field, the slider does not accept this data. Please tell me how the slider to transfer this data?

$(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)); }); 
 <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>

    1 answer 1

    I think that checking for correctness you will think up:

     $(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>