До/После

<ya-kit-section-layout
    palette={{settings.palette}}
    padding-top={{settings.section.paddingTop}}
    padding-bottom={{settings.section.paddingBottom}}
    h-padding-desktop={{settings.section.hPaddingDesktop}}
    h-padding-mobile={{settings.section.hPaddingTouch}}
    is-fullscreen={{settings.section.isFullscreen}} 
>
    <ya-kit-section-layout-row>
        <ya-kit-section-title align="{{settings.titleAlign}}" text="{{settings.titleText}}" /> 
    </ya-kit-section-layout-row>
    <ya-kit-section-layout-row> 
        <ya-kit-drag-controller axis="x" as="conroller">
            {{#with conroller}}
                <div class="container" ref={{containerRef}}>
                    <div class="slide">
                        <ya-kit-image class="slide__image" aspect-ratio="1:1" src={{settings.before.image}} />
                    </div>
                    <div 
                        class="slide" 
                        style="  clip-path: inset(0 {{multiply (subtract 1 (if progressHorizontal progressHorizontal 0.5)) 100}}% 0 0);"
                    >
                        <ya-kit-image class="slide__image" aspect-ratio="1:1" src={{settings.after.image}} />
                    </div>
                    <div 
                        class="trigger" 
                        ref={{elementRef}} 
                        style="left: {{multiply (if progressHorizontal progressHorizontal 0.5) 100}}%;"
                    >
                        <svg role="presentation" focusable="false" width="28" height="35" viewBox="0 0 32 40">
                            <path d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16V24C32 32.8366 24.8366 40 16 40C7.16344 40 0 32.8366 0 24V16Z" fill="var(--ys-background-primary)"></path>
                            <path fill="#000000" d="M11 14H13V26H11zM15 14H17V26H15zM19 14H21V26H19z"></path>
                        </svg>
                    </div>
                </div> 
            {{/with}}
        </ya-kit-drag-controller>
    
    </ya-kit-section-layout-row>
</ya-kit-section-layout>

.container { 
    --border: 1px solid rgba(0,0, 0, .12);
    
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border: var(--border);
}

.slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%:
}

.trigger {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    z-index: 1;
}

.trigger::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 6px;
    background: var(--ys-background-primary);
    z-index: -1;
    border-left: var(--border);
    border-right: var(--border);
}

.trigger svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 

 1
 2{
 3  "type": "object",
 4  "title": "",
 5  "$schema": "http://json-schema.org/draft-07/schema#",
 6  "properties": {
 7    "titleText": {
 8      "type": "string",
 9      "title": "Заголовок"
10    },
11    "titleAlign": {
12      "$ref": "#/definitions/SectionTitleAlign",
13      "title": "Расположение заголовка"
14    },
15    "palette": {
16      "$ref": "#/definitions/Palette",
17      "title": "Палитра цветов"
18    },
19    "before": {
20      "type": "object",
21      "title": "До",
22      "properties": {
23        "image": {
24          "$ref": "#/definitions/ImageModel",
25          "title": "Изображение"
26        }
27      },
28      "required": [
29        "image"
30      ]
31    },
32    "after": {
33      "type": "object",
34      "title": "После",
35      "properties": {
36        "image": {
37          "$ref": "#/definitions/ImageModel",
38          "title": "Изображение"
39        }
40      },
41      "required": [
42        "image"
43      ]
44    },
45    "section": {
46      "type": "object",
47      "title": "Размеры секции",
48      "required": [
49        "isFullscreen",
50        "paddingTop",
51        "paddingBottom"
52      ],
53      "properties": {
54        "isFullscreen": {
55          "$ref": "#/definitions/OptionalFlag",
56          "title": "Растянуть секцию на весь экран"
57        },
58        "hPaddingDesktop": {
59          "$ref": "#/definitions/SectionHPadding",
60          "title": "Отступ по краям на десктопе"
61        },
62        "hPaddingMobile": {
63          "$ref": "#/definitions/SectionHPaddingTouch",
64          "title": "Отступ по краям на телефоне"
65        },
66        "paddingTop": {
67          "$ref": "#/definitions/SectionVPadding",
68          "title": "Отступ над секцией"
69        },
70        "paddingBottom": {
71          "$ref": "#/definitions/SectionVPadding",
72          "title": "Отступ под секцией"
73        }
74      }
75    }
76  },
77  "required": [
78	"before",
79	"after",
80    "titleText",
81    "titleAlign",
82    "section"
83  ]
84}
85