123
user profile image

Uses customised range input for slider. More details on my blog

Comments

  1. Would be nicer to have a helper div the size of the image that was dragable to move the slider too

  2. Thanks for sharing. Is there an easy fix to make the slider functional in IE 10, IE 9 and IE 8? Thanks in advance

  3. Darren: see my Interactive Before-After Image Comparison for that kind of solution.

    Andy, it's not easy, but it is possible: you'd have to find a range input polyfill for IE.

  4. Dave: try putting your script at the bottom of the page.

  5. Great job, thanks for that. I need to use more than one image with before-after slider, but as soon as i duplicate the js function, they don't works.

    Here's my code:

    JS var divisor = document.getElementById("divisor"), slider = document.getElementById("slider"); function moveDivisor() { divisor.style.width = slider.value+"%"; }

    var cursor = document.getElementById("cursor"), slope = document.getElementById("slope"); function moveCursor() { cursor.style.width = slope.value+"%"; }

    HTML

                                    </div>
                                </div>
                                <div>
                                    <div>
                                        <figure>
                                            <div></div>
                                        </figure>
    
                                    </div>
                                </div>
                            </div>
    

    Sorry to annoying you, but i can't understand why it doesn't work.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...