GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing javascript.info — Slider

back to the lesson

Slider

importance: 5

Create a slider:

Drag the blue thumb with the mouse and move it.

Important details:

When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.

Open a sandbox for the task.

As we can see from HTML/CSS, the slider is a <div> with a colored background, that contains a runner – another <div> with position:relative.

To position the runner we use position:relative, to provide the coordinates relative to its parent, here it’s more convenient here than position:absolute.

Then we implement horizontal-only Drag’n’Drop with limitation by width.

Open the solution in a sandbox.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.