.ba-slider {
    position: relative;
    overflow: hidden;
}

    .ba-slider img {
        width: 100%;
        display: block;
    }

    .ba-slider .resize {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 50%;
        overflow: hidden;
    }

    .ba-slider .handle {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 4px;
        margin-left: -2px;
        background: rgba(0,0,0,.5);
        cursor: ew-resize;
    }

        .ba-slider .handle:after {
            position: absolute;
            top: 50%;
            width: 64px;
            height: 64px;
            margin: -32px 0 0 -32px;
            content: '\21d4';
            color: #fff;
            font-weight: 700;
            font-size: 36px;
            text-align: center;
            line-height: 64px;
            background: #ffb800  ;
            border: 1px solid #e6a600  ;
            border-radius: 50%;
            transition: all .3s ease;
            box-shadow: 0 2px 6px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.5),inset 0 60px 50px -30px #ffd466  ;
        }

        .ba-slider .handle.draggable:after {
            width: 48px;
            height: 48px;
            margin: -24px 0 0 -24px;
            line-height: 50px;
            font-size: 30px;
        }