Skip to content


Repository files navigation

npm version Gitter Chat



The component represents a comparison handler.

It allows you to layer two images on top of each another and compare them via a draggable slider.



Installation with Veams

veams install component comparer
veams -i c comparer




Parameter Type Value Description
settings.comparerContextClass String default Context class of component.
settings.comparerClasses String Modifier classes for component.
settings.jsOptions Object JavaScript options which gets stringified.

JavaScript Options

The module gives you the possibility to override default options:

Parameter Type Value Description
handle String '[data-js-item="comparer-handle"] Define the handler element.
topContainer String '[data-js-item="comparer-top-container"] Define the element for top container.
topContent String '[data-js-item="comparer-top-content"] Define the content element in top container.
draggClass String 'is-dragging Define the dragging class.
dragMode Boolean true Enable or disable drag mode.
topContentRight Boolean false Reverse the drag mode direction.
disabled Object {'mobile-s': false, 'mobile-m': false, 'mobile-l': false, 'tablet-s': false, 'tablet-l': false, 'desktop-s': false, 'desktop-m': false, 'desktop-l': false} Define on which viewport the module is enabled.

Sass Options

There are multiple global variables which you can change:

Parameter Default Value Description
$comparer-color-light #fff !default Handle color.