Kirilbl4,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
#slider-range-min{
margin:10px;
width:500px;
height:8px;
}
.ui-widget-header{
background-image:-webkit-gradient(linear,left,right,color-stop(0,#FFD700),color-stop(1,#FF4500));
background-image:-o-linear-gradient(left,#FFD700,#FF4500);
background-image:-moz-linear-gradient(left,#FFD700,#FF4500);
background-image:-webkit-linear-gradient(left,#FFD700,#FF4500);
background-image:linear-gradient(to right,#FFD700,#FF4500);
}
.ui-slider .ui-slider-handle{
background-color: hsla(51, 100%, 50%, 1);
color: hsla(16, 100%, 50%, 1);
padding: 2px;
background-image: none;
border-radius:50%;
position:relative;
font-size:12px;
display:block;
width: 2em;
height: 2em;
top:-0.8em;
line-height: 1.8em;
text-align: center;
}
.ui-slider .ui-slider-handle:focus{
outline:0;
border:0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#slider-range-min").slider({
step: 10,
range: "min",
min: 50,
max: 500,
value: 100,
slide: setAmount,
change: setAmount
});
function setAmount(event, ui) {
var amount = ui ? ui.value : 100;
$(".ui-slider-handle").text(amount);
$("#amount").val(amount + " м");
$("#price").val(amount * 650 + " руб");
$("#price_2").val(amount * 1200 + " руб");
$("#price_3").val(amount * 1850 + " руб")
}
$("input#amount").on("change", function() {
var amount = parseInt(this.value, 10) || 100;
$("#slider-range-min").slider("value", amount)
}).change()
});
</script>
</head>
<body>
<div class="calc">
<div class="items">
<div class="block">
<label for="amount">Площадь дома:</label><br />
<input type="text" name="amount" id="amount"><br />
</div>
<div class="block">
<label for="amount">Стоимость монтажа:</label><br />
<input type="text" id="price" readonly><br />
</div>
<div class="block">
<label for="amount">Производство элементов:</label><br />
<input type="text" id="price_2" readonly><br />
</div>
<div class="block">
<label for="amount">Общая стоимость</label><br />
<input type="text" id="price_3" readonly><br />
</div>
</div>
<div id="slider-range-min"></div>
</div>
</body>
</html>
