Installation and usage instructions are available on GitHub.
All images in the examples are given
width="100%" property to make them responsive.
At the CSS level, the component supports default pseudo selectors, such as
:hover. This can be exploited when setting the component's behavior.
Some shadows can be used to give the separators and arrows more contrast on a light background.
Warning: shadows have a negative effect on the rendering performance of the component.
Resize the window to see it in action.
slot="handle" attribute to any tag within
<img-comparison-slider> and it becomes a handle. In this example, we will use
The combination of the component's
:focus pseudo-classes, CSS, and arbitrary HTML for a handle provides many options for styling the component.
second do not necessarily have to be an
<img> tag. They could be any HTML tag. Let us use this to our advantage and create good-looking, semantic-friendly labels.
The divider position can be specified as a percentage using the
Automatic slide on mouse over can be set up with
The slide direction can be set with the