With this component you can compare two images, something old with something new, or other events, like before and after Covid. The 'before' image is a background image, and the 'after' one is a 'normal' image which is hidden at first.
One important tip: It is best to avoid moving the slider handle while working in the app. It may easily slip out of position and hide somewhere down the page. No risk of that in preview, though. However, if this should happen, open the element tree and look for the class .handle. Drag it up so it is sitting inside the container .slider, which again is inside the .range-container. Or to describe it in another way: The correct position is right above the html element .pertaining-to-thumb, and with the same indentation, when you look at it in the element tree.
Download this component
This component can be used both for 'mobile-up' and 'desktop-down'.
Before/After
With this component you can compare two images, something old with something new, or other events, like before and after Covid. The 'before' image is a background image, and the 'after' one is a 'normal' image which is hidden at first.
One important tip: It is best to avoid moving the slider handle while working in the app. It may easily slip out of position and hide somewhere down the page. No risk of that in preview, though.
However, if this should happen, open the element tree and look for the class .handle. Drag it up so it is sitting inside the container .slider, which again is inside the .range-container. Or to describe it in another way: The correct position is right above the html element .pertaining-to-thumb, and with the same indentation, when you look at it in the element tree.
Download this component
This component can be used both for 'mobile-up' and 'desktop-down'.