Directory

← Back

Image Comparison Slider Add-on

Vaadin Flow Component for displaying two images side by side with a slider for comparing them

Author

Contributors

Rating

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);

Compatibility

(Loading compatibility data...)

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

Image Comparison Slider Add-on - Vaadin Add-on Directory

Vaadin Flow Component for displaying two images side by side with a slider for comparing them Image Comparison Slider Add-on - Vaadin Add-on Directory
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](https://www.npmjs.com/package/img-comparison-slider).
Online