Component Options

The component options can be initializated by sending this as a object to the class creator or by data-*. To see how to use the data-*, see the section Setting options from data-* in Getting Started.

The component set in the creator, has support for the below options:

Component size
The component size can be set by the width and height property in options. The width and height properties accept number, percent or the aspect ratio for the height. Some examples of use this properties is below:
Fixed Width and Height
<div class="image-compare" data-width="300" data-height="300">
    <img src="./images/comparer-1.jpg">
    <img src="./images/comparer-2.jpg">
</div>

Or (in constructor)...

var el = document.getElementById('my-image-compare');
var comp = new ImageCompare(el, {
    width: 300,
    height: 300
});
Fixed Width and Proportional Height
<div class="image-compare" data-width="300" data-height="auto">
    <img src="./images/comparer-1.jpg">
    <img src="./images/comparer-2.jpg">
</div>

Or (in constructor)...

var el = document.getElementById('my-image-compare');
var comp = new ImageCompare(el, {
    width: 300,
    height: 'auto'
});
Fixed Width and Proportional Height
<div class="image-compare" data-width="300" data-height="4/3">
    <img src="./images/comparer-1.jpg">
    <img src="./images/comparer-2.jpg">
</div>

Or (in constructor)...

var el = document.getElementById('my-image-compare');
var comp = new ImageCompare(el, {
    width: 300,
    height: '4/3'
});

Note: for the proportional height, the accepted values by the component is auto, 4/3, 21/9 and 16/9.

Relative Width and Proportional Height
<div class="image-compare" data-width="70%" data-height="4/3">
    <img src="./images/comparer-1.jpg">
    <img src="./images/comparer-2.jpg">
</div>

Or (in constructor)...

var el = document.getElementById('my-image-compare');
var comp = new ImageCompare(el, {
    width: '70%',
    height: '4/3'
});
sliderClass

The sliderClass property in options is used to set classes to the slider in the image comparer. This property accepts string or array, if this is a string, this is added to classList (note: if this is an string, then you can set various classes by separating each by a whitespace, like "blue my-slider") property of the slider, but if is a array, each element in the array is added to classList of the slider. You can use this to set the color or format, like a circle, in the slider, see some examples:

Materialize Red Circle
<div class="image-compare" data-slider-class="circle red">
    <img src="./images/comparer-1.jpg">
    <img src="./images/comparer-2.jpg">
</div>

Or (in constructor)...

var el = document.getElementById('image-compare-option-red-circle');
var comp = new ImageCompare(el, {
    sliderClass: ['red', 'circle']
});

Or (in constructor)...

var el = document.getElementById('image-compare-option-red-circle');
var comp = new ImageCompare(el, {
    sliderClass: 'red circle'
});
sliderContent

The sliderContent property in options is used to set the content of the slider, for example if you need to add an icon in the slider. See an example:

Material-Icon
<div class="image-compare"
    data-width="70%"
    data-slider-class="red circle icon-to-center noselect"
    data-slider-content="<i class='material-icons'>keyboard_tab</i>"
>
    <img src="./images/comparer-1.jpg">
    <img src="./images/comparer-2.jpg">
</div>

Or (in constructor)...

var el = document.getElementById('image-compare-slider-content');
var comp = new ImageCompare(el, {
    width: '70%',
    sliderClass: ['red', 'circle', 'icon-to-center', 'noselect'],
    sliderContent: '<i class="material-icons">keyboard_tab</i>',
});

And the css of used classes:

.icon-to-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
            -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}
onResize

The onResize callback has the arguments (width, height, element).

var el = document.querySelector('#my-image-compare');
var comp = new ImageCompare(el, {
    width: '70%',
    onResize: function(w, h, element) {
        console.log("resized");
    }
});
onSliderMove
The onSliderMove callback has the arguments (x, left_slider_pos, slider_element). This callback is executed when the slider is moved.
var el = document.querySelector('#my-image-compare');
var comp = new ImageCompare(el, {
    width: '100%',
    onSliderMove: function(x, pos, slider) {
        console.log("moved");
    }
});