Улан,
про картинки не осилил ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<form action="http://">
<div class="block_cheked">
<select name="c" id="c" class="shower_select">
<option value="90">прозрачное</option>
<option value="110">коричневое</option>
<option value="120">матовое</option>
<option value="130">пескоструйное</option>
<option value="140">полосатое</option>
</select>
</div>
<div class="inputs">
<div class="inpRng">
<input id="a" type="range" min="900" max="2100" step="50" value="900" class="range" >
<input type="number" min="900" max="2100" step="50" id="firstInp" value="900" class="range_1"><label for=""> высота в мм</label>
</div><br>
<div class="inpRng">
<input id="b" type="range" min="50" max="1000" value="50" class="range" >
<input type="number" min="50" max="1000" step="50" id="secondInp" value="50" class="range_1" ><label for=""> ширина в мм</label>
</div>
</div>
</form>
<p id="out"></p>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const form = document.querySelector("form");
form.addEventListener("input", event => {
if(event.target.matches(".inpRng input"))
event.target.closest(".inpRng").querySelectorAll("input").forEach(
elem => {if(elem != event.target) elem.value = event.target.value;}
);
let size = (a.value * b.value/1000000);
let result = (size * c.value).toFixed(2);
out.innerHTML = `<br>предварительная сумма: ${result}руб., площадь: ${size}m²`;
});
form.dispatchEvent(new Event("input"))
});
</script>
</body>
</html>
