Foknik,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.container {
max-width: 1170px;
margin: 0 auto;
}
.order-block {
display: flex;
}
.order-block-item__1 {
width: 100%;
max-width: 466px;
}
.order-block-item__1 p {
margin-bottom: 72px;
}
.range-block {
position: relative;
}
.range-block_number {
position: absolute;
left: 32px;
top: -54px;
width: 55px;
height: 24px;
box-sizing: border-box;
line-height: 24px;
color: #fff;
font-size: 14px;
text-align: right;
padding-right: 25px;
background: #3399cc;
border-radius: 4px;
-webkit-transform: translateX(-52px);
transform: translateX(-52px);
}
.range-block_number:before {
content: "m2";
display: block;
box-sizing: border-box;
position: absolute;
top: 0;
right: 0;
width: 23px;
height: 100%;
text-align: right;
padding-right: 5px;
}
.range-block_number:after {
content: "";
position: absolute;
left: 50%;
margin-left: -3.5px;
top: 100%;
border-top: 10px solid #3399cc;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.range-block_range {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
display: block;
width: 100%;
left: 0;
bottom: 0;
padding: 0;
height: 7px;
outline: none;
background: #ccc;
}
</style>
</head>
<body>
<div class="container">
<h2 class="order">Легкий способ заказать натяжной потолок в свою квартиру</h2>
<div class="order-block">
<div class="order-block-item__1">
<p class="area">Общая площадь потолков ㎡</p>
<div class="range-block">
<div class="range-block_number">32</div>
<input class="range-block_range range_area" type="range" min="32" max="750" value="32">
</div>
</div>
<div class="order-block__item-2"></div>
<div class="order-block__item-3"></div>
</div>
</div>
<script>
let range = document.querySelector('.range_area');
let range_number = document.querySelector('.range-block_number');
range.oninput = function() {
range_number.style.transform = `translateX(${(this.clientWidth - 12) *
(this.value - 32)/ (750 -32) - 52}px)` ;
console.log(range_number);
range_number.innerHTML = this.value;
}
</script>
</body>
</html>