Before and after image slider

1<main class="ba_main">
2  <div class="container before_after">
3    <div class="image-container">
4      <div class="before_img">
5        <img
6          class="image-before slider-image"
7          src="https://localdentalclinics.com.au/blogs/1671520930.png"
8          alt="color photo"
9        >
10        <span
11          class="before_badge ba_badge"
12          style="display: block;"
13          >Before</span
14        >
15      </div>
16      <div class="after_img">
17        <img
18          class="image-after slider-image"
19          src="https://beaulieudental.co.uk/wp-content/uploads/2020/11/teeth-whitening-after-1.jpg"
20          alt="black and white"
21        >
22        <span class="after_badge ba_badge" style="display: block;"
23          >After</span
24        >
25      </div>
26    </div>
27    <input
28      type="range"
29      min="0"
30      max="100"
31      value="50"
32      aria-label="Percentage of before photo shown"
33      class="ba-slider"
34    >
35    <div class="slider-line" aria-hidden="true"></div>
36    <div class="slider-button" aria-hidden="true">
37      <svg
38        xmlns="http://www.w3.org/2000/svg"
39        width="10"
40        height="10"
41        fill="#fff"
42        viewBox="0 0 256 256"
43      >
44        <rect width="256" height="256" fill="none"></rect>
45        <line
46          x1="128"
47          y1="40"
48          x2="128"
49          y2="216"
50          fill="none"
51          stroke="currentColor"
52          stroke-linecap="round"
53          stroke-linejoin="round"
54          stroke-width="16"
55        ></line>
56        <line
57          x1="96"
58          y1="128"
59          x2="16"
60          y2="128"
61          fill="none"
62          stroke="currentColor"
63          stroke-linecap="round"
64          stroke-linejoin="round"
65          stroke-width="16"
66        ></line>
67        <polyline class="before_arrow"
68          points="48 160 16 128 48 96"
69          fill="none"
70          stroke="currentColor"
71          stroke-linecap="round"
72          stroke-linejoin="round"
73          stroke-width="16"
74        ></polyline>
75        <line
76          x1="160"
77          y1="128"
78          x2="240"
79          y2="128"
80          fill="none"
81          stroke="currentColor"
82          stroke-linecap="round"
83          stroke-linejoin="round"
84          stroke-width="16"
85        ></line>
86        <polyline class="after_arrow"
87          points="208 96 240 128 208 160"
88          fill="none"
89          stroke="currentColor"
90          stroke-linecap="round"
91          stroke-linejoin="round"
92          stroke-width="16"
93        ></polyline>
94      </svg>
95    </div>
96  </div>
97</main>
98
99<style>
100  .ba_main {
101    display: flex;
102    place-items: center;
103    flex-wrap: wrap;
104    gap: 30px;
105    padding: 0 5rem;
106    max-width: 1200px;
107    width: 100%;
108    margin: 50px auto;
109  }
110
111  img {
112    display: block;
113    max-width: 100%;
114  }
115
116  .container {
117    display: grid;
118    position: relative;
119    overflow: hidden;
120    border-radius: 1rem;
121    --position: 50%;
122    width: 50%;
123    margin: 0 auto;
124  }
125
126  .image-container {
127    max-width: 1200px;
128  }
129
130  .before_badge {
131    z-index: 99 !important;
132    position: absolute;
133    bottom: 15px;
134    left: 15px;
135    background: #fff;
136    padding: 0 5px;
137    border-radius: 5px;
138    color: #000;
139  }
140
141  .after_badge {
142    z-index: 99 !important;
143    position: absolute;
144    bottom: 15px;
145    right: 15px;
146    background: #fff;
147    padding: 0 5px;
148    border-radius: 5px;
149    color: #000;
150  }
151
152  .slider-image {
153    width: 100%;
154    height: 100%;
155    object-fit: cover;
156    object-position: left;
157    max-height: 500px;
158  }
159
160  .image-before {
161    position: absolute;
162    inset: 0;
163    width: var(--position);
164  }
165
166  .ba-slider {
167    position: absolute;
168    inset: 0;
169    cursor: pointer;
170    opacity: 0;
171    width: 100%;
172    height: 100%;
173  }
174
175  .ba-slider:focus-visible ~ .slider-button {
176    outline: 5px solid black;
177    outline-offset: 3px;
178  }
179
180  .slider-line {
181    position: absolute;
182    inset: 0;
183    width: .2rem;
184    height: 100%;
185    background-color: #fff;
186    left: var(--position);
187    transform: translateX(-50%);
188    pointer-events: none;
189  }
190
191  .slider-button {
192    position: absolute;
193    background-color: #ffffffb5 !important;
194    color: black;
195    padding: .5rem;
196    border-radius: 100vw;
197    display: grid;
198    place-items: center;
199    top: 50%;
200    left: var(--position);
201    transform: translate(-50%, -50%);
202    pointer-events: none;
203    box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
204width: 10px;
205height: 40px;
206  }
207
208  @media only screen and (max-width: 768px) {
209    .container {
210      width: 100%;
211    }
212    .ba_main {
213      padding: 0 20px;
214    }
215  }
216</style>
217
218<script>
219  document.addEventListener("DOMContentLoaded", function () {
220    const container = document.querySelector(".before_after");
221    const slider = document.querySelector(".ba-slider");
222
223    slider.addEventListener("input", (e) => {
224      container.style.setProperty("--position", `${e.target.value}%`);
225    });
226  });
227</script>