用javascript，HTML5中的水平线替换按钮

Question

I am using one input button for hide and show image div and Using html5, jquery, Css3. But right now i want to replace button with one horizontal line. Whenever move point in line then button is triggered.

Right now i have normal button, I am showing in below image:

But i want one line replace of this button like below image

I am using three image div and after click on rotate but it is showing next image div.

switchVisible() is a function for show and hide of image.
I don't have any about this please give me some idea.

I am using this button code:

<input id="Button1" type="button" value="Rotate" onclick="switchVisible();"/>

Answer 1

You can use j query.ui slider for your line to switch between images.

something like this:

$("#imageLine").slider({
    value: 0,
    orientation: "horizontal",
    range: "min",
    animate: true,
    stop: function( event, ui ) {
        //you can detect where ui.slider stops here
        console.log(ui.value)

        //and run your function then
        switchVisible(ui.value);
    }
});

function switchVisible(){
     ...your logic for displaying images depending on ui.slider position
}