https://pixcphotos.com/js/image-slider.js

1(function () {
2  'use strict';
3
4  const sliders = document.querySelectorAll('[data-image-slider]');
5  sliders.forEach(initSlider);
6
7  function initSlider(root) {
8    const after = root.querySelector('[data-image-slider-after]');
9    const handle = root.querySelector('[data-image-slider-handle]');
10    if (!after || !handle) return;
11
12    let position = 0.5;
13
14    const apply = () => {
15      const rect = root.getBoundingClientRect();
16      const pct = position * 100;
17      after.style.width = pct + '%';
18      handle.style.left = pct + '%';
19      after.style.setProperty('--pixc-image-slider-image-width', rect.width + 'px');
20    };
21
22    const setFromClientX = (clientX) => {
23      const rect = root.getBoundingClientRect();
24      const x = clientX - rect.left;
25      position = Math.max(0, Math.min(1, x / rect.width));
26      apply();
27    };
28
29    let dragging = false;
30
31    const onDown = (e) => {
32      dragging = true;
33      const x = e.touches ? e.touches[0].clientX : e.clientX;
34      setFromClientX(x);
35      if (e.cancelable) e.preventDefault();
36    };
37
38    const onMove = (e) => {
39      if (!dragging) return;
40      const x = e.touches ? e.touches[0].clientX : e.clientX;
41      setFromClientX(x);
42    };
43
44    const onUp = () => {
45      dragging = false;
46    };
47
48    root.addEventListener('mousedown', onDown);
49    window.addEventListener('mousemove', onMove);
50    window.addEventListener('mouseup', onUp);
51
52    root.addEventListener('touchstart', onDown, { passive: false });
53    window.addEventListener('touchmove', onMove, { passive: true });
54    window.addEventListener('touchend', onUp);
55    window.addEventListener('touchcancel', onUp);
56
57    apply();
58    window.addEventListener('resize', apply);
59  }
60})();