Elementor Pro: Create a Stunning Interactive Calculator for Your Website
Рассчитать стоимость
Чистка
3 000 ₽
Реставрация
12 000 ₽
Имплантация
45 000 ₽
1
Итого
3 000 ₽
html + js
<div class="dental-premium-final">
<div class="title">Рассчитать стоимость</div>
<div class="services">
<div class="service active" data-price="3000">
<div class="icon">
<svg viewBox="0 0 24 24">
<path d="M12 3C8 3 5 6 5 10C5 14 7 21 9 21C10.5 21 10.5 17 12 17C13.5 17 13.5 21 15 21C17 21 19 14 19 10C19 6 16 3 12 3Z"/>
</svg>
</div>
<div>
<div class="name">Чистка</div>
<div class="price">3 000 ₽</div>
</div>
</div>
<div class="service" data-price="12000">
<div class="icon">
<svg viewBox="0 0 24 24">
<path d="M12 3C8 3 5 6 5 10C5 14 7 21 9 21C10.5 21 10.5 17 12 17C13.5 17 13.5 21 15 21C17 21 19 14 19 10C19 6 16 3 12 3Z"/>
</svg>
</div>
<div>
<div class="name">Реставрация</div>
<div class="price">12 000 ₽</div>
</div>
</div>
<div class="service" data-price="45000">
<div class="icon">
<svg viewBox="0 0 24 24">
<path d="M12 3C8 3 5 6 5 10C5 14 7 21 9 21C10.5 21 10.5 17 12 17C13.5 17 13.5 21 15 21C17 21 19 14 19 10C19 6 16 3 12 3Z"/>
</svg>
</div>
<div>
<div class="name">Имплантация</div>
<div class="price">45 000 ₽</div>
</div>
</div>
</div>
<div class="range-block">
<label>Количество зубов</label>
<input type="range" id="teeth" min="1" max="32" value="1">
<div class="range-num">1</div>
</div>
<div class="total">
<span>Итого</span>
<b id="total">3 000 ₽</b>
</div>
<button class="btn">Записаться на приём</button>
</div>
css
.dental-premium-final {
width: 100%;
max-width: 420px;
margin: 0 auto;
padding: 28px;
border-radius: 24px;
/* ✅ СТЕКЛО ВМЕСТО ГРАДИЕНТА | GLASS INSTEAD OF GRADIENT */
background: rgba(255,255,255,0.06);
backdrop-filter: blur(20px);
box-shadow: 0 40px 120px rgba(0,0,0,0.7);
border: 1px solid rgba(255,255,255,0.08);
color: #fff;
font-family: Inter, sans-serif;
}
/* ВСЁ НИЖЕ — ТВОЁ БЕЗ ИЗМЕНЕНИЙ | EVERYTHING BELOW — UNCHANGED */
.title {
font-size: 22px;
margin-bottom: 20px;
background: linear-gradient(90deg,#ffffff,#cfd8e3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.services {
display: flex;
flex-direction: column;
gap: 10px;
}
.service {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border-radius: 18px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(12px);
border: 1px solid transparent;
cursor: pointer;
transition: 0.3s;
position: relative;
overflow: hidden;
}
.service::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);
transition: 0.6s;
}
.service:hover::after {
left: 100%;
}
.service.active {
border: 1px solid rgba(255,255,255,0.3);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.08);
}
.icon svg {
width: 20px;
height: 20px;
stroke: white;
fill: none;
opacity: 0.9;
}
.name {
font-size: 14px;
}
.price {
font-size: 13px;
opacity: 0.6;
}
.range-block {
margin: 20px 0;
}
.range-block label {
font-size: 12px;
opacity: 0.6;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 6px;
border-radius: 10px;
background: linear-gradient(90deg,#4da3ff 0%, #1a2a3a 0%);
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 10px rgba(120,200,255,0.8);
cursor: pointer;
}
.range-num {
margin-top: 8px;
}
.total {
display: flex;
justify-content: space-between;
padding: 16px;
border-radius: 18px;
background: rgba(255,255,255,0.05);
}
.total b {
font-size: 18px;
}
.btn {
width: 100%;
margin-top: 20px;
padding: 16px;
border-radius: 20px;
border: none;
background: linear-gradient(135deg,#ffffff,#dcdcdc);
color: #111;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}
/* БАЗА | BASE */
.dental-premium-final {
width: 100% !important;
max-width: 420px !important; /* ПК | DESKTOP */
margin: 0 auto;
}
/* НОУТ | LAPTOP */
@media (max-width: 1400px) {
.dental-premium-final {
max-width: 380px !important;
}
}
/* ПЛАНШЕТ | TABLET */
@media (max-width: 1024px) {
.dental-premium-final {
max-width: 340px !important;
}
}
/* ТЕЛЕФОН | MOBILE */
@media (max-width: 480px) {
.dental-premium-final {
max-width: 100% !important;
padding: 20px;
}
}
/* ===== НАСТРОЙКИ | SETTINGS ===== */
:root {
--icon-bg: #FFF; /* фон квадрата | square background */
--icon-bg-opacity: 0.2; /* прозрачность фона | background opacity */
--icon-color: #ffffff; /* цвет зуба | icon color */
}
/* ФОН (через слой чтобы не ломать иконку) | BACKGROUND LAYER (to not break icon) */
.icon {
position: relative;
background: none !important;
}
.icon::before {
content: "";
position: absolute;
inset: 0;
background: var(--icon-bg);
opacity: var(--icon-bg-opacity);
border-radius: 10px;
}
/* САМ ЗУБ | ICON */
.icon svg {
position: relative;
z-index: 1;
stroke: var(--icon-color) !important;
fill: none !important;
}
/* ===== НАСТРОЙКА СТЕКЛА | GLASS SETTINGS ===== */
:root {
--glass-color: #016976; /* ЦВЕТ | COLOR */
--glass-opacity: 0.0; /* ПРОЦЕНТ (0.1–1) | OPACITY */
}
/* стекло | glass */
.dental-premium-final::before {
content: "";
position: absolute;
inset: 0;
background: var(--glass-color);
opacity: var(--glass-opacity); /* вот твой процент | opacity */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 20px;
z-index: 0;
}
/* контент сверху | content above */
.dental-premium-final > * {
position: relative;
z-index: 1;
}
/* ===== НАСТРОЙКА СЛАЙДЕРА | SLIDER SETTINGS ===== */
/* линия с мягким градиентом | gradient track */
input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 6px;
border-radius: 10px;
background: linear-gradient(
90deg,
rgba(255,255,255,0.9) 0%,
rgba(255,255,255,0.4) 100%
) !important;
}
/* track */
input[type=range]::-webkit-slider-runnable-track {
height: 6px;
border-radius: 10px;
background: transparent;
}
/* кружок со свечением | glowing thumb */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 0 8px rgba(255,255,255,0.9),
0 0 16px rgba(255,255,255,0.5);
margin-top: -6px;
cursor: pointer;
}
/* Firefox */
input[type=range]::-moz-range-track {
background: transparent;
}
input[type=range]::-moz-range-thumb {
background: #ffffff;
box-shadow: 0 0 8px rgba(255,255,255,0.9);
}
/* ===== ЗАГОЛОВОК | TITLE ===== */
.dental-premium-final .title {
font-size: 22px !important;
font-weight: 500 !important;
background: none !important;
-webkit-text-fill-color: #ffffff !important;
color: #ffffff !important;
}
/* ===== НАЗВАНИЕ УСЛУГ | SERVICE NAME ===== */
.dental-premium-final .name {
font-size: 18px !important;
font-weight: 500 !important;
color: #ffffff !important;
}
/* ===== ЦЕНА | PRICE ===== */
.dental-premium-final .price {
font-size: 18px !important;
font-weight: 400 !important;
color: #ffffff !important;
opacity: 0.6; /* вместо rgba | instead of rgba */
}
/* ===== ЛЕЙБЛ | LABEL ===== */
.dental-premium-final .range-block label {
font-size: 17px !important;
font-weight: 400 !important;
color: #ffffff !important;
opacity: 0.6; /* вместо rgba | instead of rgba */
}
/* ===== ЧИСЛО | VALUE ===== */
.dental-premium-final .range-num {
font-size: 14px !important;
font-weight: 600 !important;
color: #ffffff !important;
}
/* ===== ИТОГО | TOTAL ===== */
.dental-premium-final .total b {
font-size: 18px !important;
font-weight: 600 !important;
color: #ffffff !important;
}
/* ===== КНОПКА | BUTTON ===== */
.dental-premium-final .btn {
font-size: 16px !important;
font-weight: 500 !important;
background: #ffffff !important; /* цвет кнопки | button color */
color: #111111 !important; /* текст | text */
}
/* ===== ПЛАНШЕТ И ТЕЛЕФОН | TABLET & MOBILE ===== */
@media (max-width: 1024px) {
.dental-premium-final .title {
font-size: calc(22px - 2px) !important;
}
.dental-premium-final .name {
font-size: calc(18px - 2px) !important;
}
.dental-premium-final .price {
font-size: calc(13px - 2px) !important;
}
.dental-premium-final .range-block label {
font-size: calc(16px - 2px) !important;
}
.dental-premium-final .range-num {
font-size: calc(14px - 2px) !important;
}
.dental-premium-final .total b {
font-size: calc(18px - 2px) !important;
}
.dental-premium-final .btn {
font-size: calc(16px - 2px) !important;
}
}
/* ===== ШРИФТ MONTSERRAT | FONT ===== */
.dental-premium-final {
font-family: "Montserrat", sans-serif !important;
}
.dental-premium-final {
position: relative;
overflow: hidden;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
@media (max-width: 480px) {
.dental-premium-final {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto;
border-radius: 20px;
}
}
ПОЛНАЯ ИНСТРУКЦИЯ / FULL GUIDE
Калькулятор состоит из HTML (структура), CSS (дизайн) и JavaScript (логика). HTML показывает услуги, слайдер и кнопку. CSS отвечает за внешний вид. JavaScript считает итог и обрабатывает клики.
EN:
The calculator consists of HTML (structure), CSS (design), and JavaScript (logic). HTML displays services, slider, and button. CSS handles appearance. JavaScript calculates totals and handles interactions.
2. Основная формула
Итог считается по формуле: цена услуги умножается на количество зубов.
price * range.value
EN:
The total is calculated as: service price multiplied by number of teeth.
3. Где менять цену (самое важное)
Реальная цена хранится в атрибуте data-price. Именно она используется в расчёте.
<div class="service" data-price="3000">
EN:
The real price is stored in the data-price attribute. This is what the calculator uses.
4. Отображаемая цена
Текст внутри .price — это только визуал, он не влияет на расчёт.
<div class="price">3 000 ₽</div>
EN:
The .price text is only visual and does not affect calculation.
5. Важно синхронизировать
Цена в data-price и текст должны совпадать, иначе пользователь будет видеть одно, а расчёт будет другим.
EN:
The data-price value and displayed text must match to avoid confusion.
6. Активная услуга при старте
Услуга с классом active используется при загрузке страницы как стартовая.
<div class="service active" data-price="3000">
EN:
The service with class active is used as the default on page load.
7. Исправление бага с 3000
Нельзя жёстко задавать цену в JS. Нужно брать её из активного блока.
const activeService = document.querySelector('.service.active');
let price = +activeService.dataset.price;
let currentService = activeService.querySelector('.name').textContent;
calc();
EN:
Do not hardcode price in JS. Read it from the active service instead.
8. Как добавить новую услугу
Копируешь блок услуги и меняешь цену и текст.
<div class="service" data-price="10000">
<div>
<div class="name">Название</div>
<div class="price">10 000 ₽</div>
</div>
</div>
EN:
Copy a service block and change price and name.
9. Слайдер (количество зубов)
Диапазон задаётся через min и max.
<input type="range" min="1" max="32" value="1">
EN:
The range is controlled by min and max.
10. Как работает слайдер
Значение берётся из range.value и участвует в формуле.
EN:
The value comes from range.value and is used in calculation.
11. Итоговая сумма
Итог записывается в элемент с id total через JS.
total.textContent = ...
EN:
The total is written into the element with id total.
12. Кнопка и Telegram
Кнопка открывает Telegram с уже заполненным текстом.
window.open("https://t.me/USERNAME?text=" + encodeURIComponent(message));
EN:
The button opens Telegram with a pre-filled message.
13. Как изменить сообщение
Текст заявки можно редактировать внутри переменной message.
EN:
You can edit the message text inside the message variable.
14. Частые ошибки
Меняют .price вместо data-price.
Оставляют let price = 3000.
JS запускается раньше HTML.
Кэш браузера не обновился.
EN:
Changing .price instead of data-price.
Hardcoded let price = 3000.
JS runs before HTML loads.
Browser cache not refreshed.
15. Быстрый тест
Поставь data-price="99999" и проверь изменится ли итог.
EN:
Set data-price="99999" and check if total updates.