Image Comparison Slider Add-on
Vaadin Flow Component for displaying two images side by side with a slider for comparing them
This extension provides an easy way for specifying a couple of images and a slider for comparing them by moving it back and forth. It is based on this web component.
Sample code
Image img1 = new Image("https://img-comparison-slider.sneas.io/images/green-leaves.webp", "First");
Image img2 = new Image("https://img-comparison-slider.sneas.io/images/green-leaves-blurred.webp", "Second");
img1.setWidthFull();
img2.setWidthFull();
ImageComparisonSlider ics = new ImageComparisonSlider(img1, img2);
ics.setValue(70);
ics.setSizeFull();
ics.setSlideOnHover(true);
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Initial release
- Released
- 2021-12-15
- Maturity
- EXPERIMENTAL
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 14+
- Browser
- Firefox
- Safari
- Google Chrome
- iOS Browser
- Android Browser
- Microsoft Edge