Как сделать калькулятор с ползунком и AJAX: динамический расчёт без перезагрузки

Зачем это вообще нужно?

Представь: ты делаешь сайт для строительной компании или просто хочешь посчитать, сколько досок, гвоздей и рулонов кровли уйдёт на дом. Площадь — от 20 до 200 м². И чтобы не перезагружать страницу при каждом движении ползунка, всё считается «на лету» через AJAX. Это удобно, быстро и выглядит профессионально — даже если у тебя самописный блог на PHP.

Как это работает?

Схема простая:

1. Пользователь двигает ползунок (input type="range").
2. JavaScript ловит изменение и отправляет значение на сервер через fetch().
3. PHP-скрипт получает площадь, применяет формулы (или читает нормы из БД) и возвращает JSON.
4. JS подставляет полученные цифры в поля: доски, гвозди, крыша.

Всё происходит без перезагрузки. И да — это работает даже на Raspberry Pi в лесу, если у тебя локальный сервер.

HTML-разметка (без стилей)

Вот минимальная структура, которую можно вставить в статью или шаблон:

<h2>  Площадь дома: <span id="area-value">  50</span>   м²</h2>  
<input type="range" id="area-slider" min="20" max="200" step="10" value="50">  

<div>  
  <label>  Доски (м³): <input type="text" id="wood" readonly>  </label>  
</div>  
<div>  
  <label>  Гвозди (шт): <input type="text" id="nails" readonly>  </label>  
</div>  
<div>  
  <label>  Крыша (рулонов): <input type="text" id="roof" readonly>  </label>  
</div>  

JavaScript: отправка и обновление

<script>  
const slider = document.getElementById('area-slider');
const areaValue = document.getElementById('area-value');

slider.addEventListener('input', () =>   {
  const area = slider.value;
  areaValue.textContent = area;
  fetch('calculate.php', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: `area=${area}`
  })
  .then(res =>   res.json())
  .then(data =>   {
    document.getElementById('wood').value = data.wood.toFixed(2);
    document.getElementById('nails').value = Math.round(data.nails);
    document.getElementById('roof').value = data.roof;
  })
  .catch(err =>   console.error('Ошибка:', err));
});
</script>  

PHP: серверная логика

Файл calculate.php:

<?php
header('Content-Type: application/json; charset=utf-8');

$area = $_POST['area'] ?? null;
if (!is_numeric($area) || $area < 20 || $area >   200) {
    http_response_code(400);
    echo json_encode(['error' =>   'Некорректная площадь']);
    exit;
}

echo json_encode([
    'wood'  =>   $area * 0.8,
    'nails' =>   $area * 12,
    'roof'  =>   ceil($area / 25)
]);
?>  

Формулы можно заменить на запрос к базе: например, по project_id брать коэффициенты для разных типов домов.

Что можно улучшить?

• Добавить несколько ползунков: этажность, тип фундамента, материал стен.
• Хранить нормы расхода в MySQL и выбирать по ID проекта.
• Сделать кэширование на клиенте, чтобы не слать запрос при каждом движении.
• Добавить плавную анимацию обновления через anime.js — для красоты.

Заключение

Такой калькулятор — отличный способ показать пользователю ценность проекта «здесь и сейчас». Он не ждёт загрузки, не путается в формах, а просто двигает ползунок и видит результат. А ты — получаешь больше доверия и меньше вопросов вроде «а сколько мне надо досок на 120 метров?»

Всё это можно собрать за пару часов даже на чистом PHP и JS. Главное — не бояться экспериментировать.