Sebbo Posted January 22 Share Posted January 22 I tried various ways to add this code, but it's just not working. I tried adding it with the code block so far. Technique I used: Put the HTML section from the code pen directly in the block. After the html code add the css part inside <style> </style> blocks add the JS bit after that inside <script> </script> tags No worky. Here's the Codepen: https://codepen.io/josephwong2004/pen/NWRGxdR Any solutions? THANK YOU! HTML <body> <div class='container'> <div class='img background-img'></div> <div class='img foreground-img'></div> <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider"> <div class='slider-button'></div> </div> </body> CSS html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } @mixin center() { display: flex; justify-content: center; align-items: center; } body { margin: 0; height: 100vh; @include center; } .container { position: relative; width: 900px; height: 600px; border: 2px solid white; .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 900px 100%; } .background-img { background-image: url("https://images.squarespace-cdn.com/content/63d28d579b0def72a1e49b8a/aaf2d1c4-a529-4d38-a4dd-7350c727b24c/Virtual+Staging+-+Before+and+After+26.jpg?content-type=image%2Fjpeg"); } .foreground-img { background-image: url("https://images.squarespace-cdn.com/content/63d28d579b0def72a1e49b8a/b81bccc5-7d9a-4fe5-bc45-bd5cebd7de4a/Virtual+Staging+-+Before+and+After+25.jpg?content-type=image%2Fjpeg"); width: 50%; } .slider { position: absolute; -webkit-appearance: none; appearance: none; width: 100%; height: 100%; background: rgba(#f2f2f2, 0.3); outline: none; margin: 0; transition: all 0.2s; @include center; &:hover { background: rgba(#f2f2f2, 0.1); } &::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 6px; height: 600px; background: white; cursor: pointer; } &::-moz-range-thumb { width: 6px; height: 600px; background: white; cursor: pointer; } } .slider-button { $size: 30px; pointer-events: none; position: absolute; width: $size; height: $size; border-radius: 50%; background-color: white; left: calc(50% - 18px); top: calc(50% - 18px); @include center; @mixin arrow-helper() { content: ""; padding: 3px; display: inline-block; border: solid #5d5d5d; border-width: 0 2px 2px 0; } &:after { @include arrow-helper(); transform: rotate(-45deg); } &:before { @include arrow-helper(); transform: rotate(135deg); } } } JAVA SCRIPT jQuery("#slider").on("input change", (e)=>{ const sliderPos = e.target.value; // Update the width of the foreground image $('.foreground-img').css('width', `${sliderPos}%`) // Update the position of the slider button $('.slider-button').css('left', `calc(${sliderPos}% - 18px)`) }); Link to comment
Ziggy Posted January 23 Share Posted January 23 Installing pure code from codepen can be tricky, quite often they will use classes that conflict with ones already on the website which causes no end of problems. This topic may be useful, lots of suggestions: You may want to have a look at this Squarespace specific code: https://www.will-myers.com/articles/before-after-slider-for-your-squarespace-website Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment