05 · Визуал
Слайдер «до/после» в Tilda
готовый код.
Интерактивное сравнение двух изображений для ремонтов, косметологии, дизайна и кейсов.
Забрать код ↓- Технология
- HTML + CSS + JS
- Установка
- 10 минут
- Куда вставлять
- Блок T123
- Обновлено
- 08.09.2026
/ Демонстрация
Сначала посмотрите,
как это работает.
Live demoСлайдер до/после
ДоСтандартный блок
ПослеЦельный интерфейс
/ Код
Скопируйте.
Вставьте. Опубликуйте.
Код не требует сборки или установки библиотек. Перед запуском замените значения, отмеченные в инструкции ниже.
Готовый код
<div class="tselno-compare" style="--position: 50%">
<img class="tselno-compare__image" src="BEFORE_IMAGE_URL" alt="До">
<img class="tselno-compare__image tselno-compare__after" src="AFTER_IMAGE_URL" alt="После">
<span class="tselno-compare__label tselno-compare__label--before">До</span>
<span class="tselno-compare__label tselno-compare__label--after">После</span>
<span class="tselno-compare__line" aria-hidden="true"></span>
<input class="tselno-compare__range" type="range" min="0" max="100" value="50" aria-label="Показать результат до или после">
</div>
<style>
.tselno-compare {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 10;
background: #ddd;
}
.tselno-compare__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.tselno-compare__after {
clip-path: inset(0 calc(100% - var(--position)) 0 0);
}
.tselno-compare__line {
position: absolute;
top: 0;
bottom: 0;
left: var(--position);
width: 2px;
background: #fff;
transform: translateX(-1px);
pointer-events: none;
}
.tselno-compare__line::after {
content: '↔';
position: absolute;
top: 50%;
left: 50%;
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 50%;
background: #fff;
color: #10110f;
transform: translate(-50%, -50%);
}
.tselno-compare__range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
}
.tselno-compare__label {
position: absolute;
z-index: 2;
top: 16px;
padding: 8px 10px;
background: #10110f;
color: #fff;
font: 700 12px/1 Arial, sans-serif;
text-transform: uppercase;
}
.tselno-compare__label--before { left: 16px; }
.tselno-compare__label--after { right: 16px; }
</style>
<script>
document.querySelectorAll('.tselno-compare').forEach(function (compare) {
var range = compare.querySelector('.tselno-compare__range');
range.addEventListener('input', function () {
compare.style.setProperty('--position', range.value + '%');
});
});
</script>/ Установка
Четыре шага.
- 01
Загрузите два изображения одинакового размера в Tilda или другое стабильное хранилище.
- 02
Замените BEFORE_IMAGE_URL и AFTER_IMAGE_URL прямыми ссылками на изображения.
- 03
Вставьте весь код в блок T123 и опубликуйте страницу.
- 04
Проверьте крайние положения ползунка мышью, пальцем и клавишами со стрелками.
/ Настройки
Подстройте под себя.
- Пропорции
- Свойство aspect-ratio: 16 / 10. Поставьте пропорции ваших изображений.
- Старт
- Значение value=50 и переменная --position: 50%. Меняйте их одновременно.
- Подписи
- Замените слова «До» и «После» внутри span и в alt изображений.
/ Нужна доработка
Не нашли нужное?
Соберём под ваш сайт.
Опишите задачу и пришлите ссылку на страницу. Посмотрим, можно ли решить её готовым кодом или нужна индивидуальная разработка.
Обсудить в Telegram ↗