Estoy tratando de construir un control deslizante de comparación de imágenes dinámicas que funcione con el campo repetidor ACF. Usé html, css y js de esta publicación de blog: https://dev.to/shantanu_jana/image-comparison-slider-using-html-css-and-javascript-3cff

Y funciona como lo necesito, además de que no funciona con el repetidor ACF (o, en general, tiene múltiples controles deslizantes de comparación en una página, que es lo que necesito)

Supongo que se debe a las ID que se necesitan para el JS, pero no tengo suficiente experiencia para ajustar el código para que funcione. ¿Alguien puede ayudar? ¿O acaso no es posible?

HTML:

 <div class="container"> <img src="<?php echo get_field( 'slider_1' ); ?>"> <img id="my-img" src="<?php echo get_field( 'slider_2' ); ?>"> <input type="range" min="0" max="100" value="50" id="slider" oninput="slide()"> </div>

CSS:

 *, *:before, *:after{ padding: 0; margin: 0; box-sizing: border-box; } body{ height: 100vh; display: grid; background: #d1ebec; place-items: center; } .container{ height: 300px; width: 400px; position: relative; overflow: hidden; border: 5px solid #bfc0c1; box-shadow:-3px 5px 15px #000; } img{ width: 100%; height: 100%; position: absolute; -o-object-fit: cover; object-fit: cover; } #my-img{ clip-path: polygon(0 0 , 50% 0, 50% 100%, 0 100%); } #slider{ position: relative; -webkit-appearance: none; width: calc( 100% + 40px); height: 100%; margin-left: -20px; background-color: transparent; outline: none; } #slider::-webkit-slider-thumb{ -webkit-appearance: none; height: 45px; width: 45px; background: url("slider-icon.svg"), rgba(255,255,255,0.3); border: 4px solid white; border-radius: 50%; background-size: contain; cursor: pointer; }

JS:

 function slide(){ let slideValue = document.getElementById("slider").value; document.getElementById("my-img").style.clipPath = "polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)"; console.log("polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)"); }