<form>
  <fieldset>
    <legend>Сумма инвестиций</legend>
    <p><strong><span id="demo"></span> р</strong></p>
    <input type="range" min="100000" max="2000000" value="100000"      class="slider" id="myRange">
  </fieldset>
</form>
fieldset {
  border: 2px solid #eee;
}
legend {
  color: #5a5a5a;
  font-weight: 500;
}
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 5px;
  background: #484848;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 50%;
  background: #484848;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 23px;
  height: 24px;
  border: 0;
  background: url('contrasticon.png');
  cursor: pointer;
}
function numberWithSpaces(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = numberWithSpaces(slider.value);

slider.oninput = function() {
  output.innerHTML = numberWithSpaces(this.value);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js