.histogram-slider__bars {
    position: relative;

    width: 100%; 
    height: 100px;

    cursor: ew-resize;
}

.histogram-slider__bar {
    position: absolute; 
    bottom: 0;

    width: 2px !important;

    background: #6E7377;
    opacity: 1;
    transition: opacity .4s;
    transform: translateZ(0);

    will-change: opacity;
}

.histogram-slider__bar:first-of-type:before,
.histogram-slider__bar:last-of-type:before {
    background: #662211;
}

.histogram-slider__bar--inactive {
    opacity: .4;
    transition: opacity .8s;
}

.histogram-slider__bar:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: #858F97;
    opacity: 1;

    transition:  opacity .1s, background .3s, height .5s;
    will-change: opacity background height;
}

.histogram-slider__bar--inactive:before {
    height: 0%;    

    background: #BCD;
    opacity: .1;

    transition:  opacity .3s, background .3s, height .5s;
    will-change: opacity background height;
}