Colors, Forms and Fonts

This page contains some examples with colors and forms.

Red on Green with class “red-on-green”

.image-comparator.red-on-green .noUi-horizontal .noUi-handle {
    background-color: red;
    border-color: darkred;
}

.image-comparator.red-on-green .noUi-target {
    background-color: green;
    border-color: darkgreen;
}

Bullet on thin line with class “bullet-on-thin-line”

.image-comparator.bullet-on-thin-line .noUi-horizontal .noUi-handle {
    width: 15px;
    height: 15px;
    left: -7px;
    top: -6px;
    border-color: black;
    background-color: black;
    box-shadow: none;
    border-radius: 30px;
}

.image-comparator.bullet-on-thin-line .noUi-horizontal .noUi-handle:after,
.image-comparator.bullet-on-thin-line .noUi-horizontal .noUi-handle:before {
    display: none;
}


.image-comparator.bullet-on-thin-line .noUi-target{
    border-radius: 10px;
    border-color: black;
    background-color: black;
    box-shadow: none;
    height: 5px;
}

Alter title

To just select one specific slider you may add a class “my-custom-title”. Without this class you still can edit all titles.

.image-comparator.my-custom-title .title {
    font-size: 12px;
    color: red;
}
.image-comparator .title {
    font-size: 12px;
    color: red;
}