<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="container"> <div class="row"> <h2>How to make two range price input have space between each other?</h2> <div class="range-slider"> <span>from <input type="number" value="3000" min="0" max="100000" step="500"> to <input type="number" value="75000" min="0" max="100000" step="500"></span> <input value="3000" min="0" max="100000" step="500" type="range"> <input value="50000" min="0" max="100000" step="500" type="range"> <svg width="100%" height="24"> <line x1="4" y1="0" x2="480" y2="0" stroke="#444" stroke-width="12" stroke-dasharray="1 28"></line> </svg> </div> </div> </div>

.range-slider { width: 480px; margin: auto; text-align: center; position: relative; height: 6em; } .range-slider svg, .range-slider input[type="range"] { position: absolute; left: 0; bottom: 0; } input[type="number"] { border: 1px solid #ddd; text-align: center; font-size: 1.6em; } input[type="number"]:invalid, input[type="number"]:out-of-range { border: 2px solid #ff6347; } input[type="range"] { -webkit-appearance: none; width: 100%; } input[type="range"]:focus { outline: none; } input[type="range"]:focus::-webkit-slider-runnable-track { background: #2497e3; } input[type="range"]:focus::-ms-fill-lower { background: #2497e3; } input[type="range"]:focus::-ms-fill-upper { background: #2497e3; } input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: #2497e3; border-radius: 1px; box-shadow: none; border: 0; } input[type="range"]::-webkit-slider-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid #2497e3; height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; -webkit-appearance: none; margin-top: -7px; } input[type="range"]::-moz-range-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: #2497e3; border-radius: 1px; box-shadow: none; border: 0; } input[type="range"]::-moz-range-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid #2497e3; height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; } input[type="range"]::-ms-track { width: 100%; height: 5px; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; color: transparent; } input[type="range"]::-ms-fill-lower, input[type="range"]::-ms-fill-upper { background: #2497e3; border-radius: 1px; box-shadow: none; border: 0; } input[type="range"]::-ms-thumb { z-index: 2; position: relative; box-shadow: 0px 0px 0px #000; border: 1px solid #2497e3; height: 18px; width: 18px; border-radius: 25px; background: #a1d0ff; cursor: pointer; }

(function() { const parent = document.querySelector('.range-slider'); if (!parent) { return; } const rangeS = parent.querySelectorAll('input[type="range"]'), numberS = parent.querySelectorAll('input[type="number"]'); rangeS.forEach((el) => { el.oninput = () => { let slide1 = parseFloat(rangeS[0].value), slide2 = parseFloat(rangeS[1].value); if (slide1 > slide2) { [slide1, slide2] = [slide2, slide1]; } numberS[0].value = slide1; numberS[1].value = slide2; } }); numberS.forEach((el) => { el.oninput = () => { let number1 = parseFloat(numberS[0].value), number2 = parseFloat(numberS[1].value); if (number1 > number2) { let tmp = number1; numberS[0].value = number2; numberS[1].value = tmp; } rangeS[0].value = number1; rangeS[1].value = number2; } }); })();