A bunch of examples of progressively enhanced server-rendered image comparison web components using WebC.
This component expects two images to be nested inside and will produce a input type range to let the user compare the two images by dragging the range slider.
- Live demo on Netlify
- Deploy to Netlify
- Learn more about WebC
- Originally a demo for a talk given at the Eleventy Meetup: Adding Components to WebC with Eleventy
- Always Enabled: form control is interactive pre-JS and synchronizes post-JS.
- Disabled until JavaScript: uses JS to toggle the range input from disabled to enabled.
- Hidden via
:not(:defined)CSS - Hidden via JS
<template> - Declarative Shadow DOM
:has()and Radios- Bonus:
opacitySlider