<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 {
appearance: none;
width: 100%;
height: 2px;
border-radius: 5px;
background: #484848;
outline: none;
opacity: 0.7;
transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::slider-thumb {
appearance: none;
width: 25px;
height: 25px;
border: 0;
border-radius: 50%;
background: #484848;
cursor: pointer;
}
.slider::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);
}
This Pen doesn't use any external CSS resources.