Floy Rodd Floy Rodd - 5 months ago 23
CSS Question

How do I make this pure CSS image comparison slider start at the middle?

I have the following

http://codepen.io/anon/pen/AXrEzK

I want the slider to start in the middle instead of starting way at the left. I have tried to edit the width and make it 185px, but the problem with that is it ruins the slider, the slider starts at the middle but no longer slides to the left.

.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 185px;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}


Any help is appreciated, thank you in advance

Answer

It seems the min-width for the CSS resize is strictly the stated width at the point of initial resizing - so you can't resize smaller than the stated width.

Hence, I believe the best CSS-only workaround is by stating the minimum width under :active - it causes a little stutter on click, but works fine when dragging: https://jsfiddle.net/uxjczdgk/

.image-slider > div {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width:50%;
    max-width: 100%;
    overflow: hidden;
    resize: horizontal;
}
.image-slider > div:active {
    width:25px;
}

Honestly though, you're better off with a JS/JQuery solution.

Comments