<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class=""> <div id="slider-range"> </div> <input type="number" min=1 max="10" oninput="validity.valid||(value='1');" id="min_price" class="price-range-field" /> <input type="number" min=1 max="10" oninput="validity.valid||(value='100');" id="max_price" class="price-range-field" /> </div>

$("#slider-range").slider({ range: true, orientation: "horizontal", min: 1, max: 10, values: [1, 10], step: 1, slide: function (event, ui) { if (ui.values[0] == ui.values[1]) { return false; } $("#min_price").val(ui.values[0]); $("#max_price").val(ui.values[1]); } });