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.

باز کردن یک sandbox برای تمرین.

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.

باز کردن راه‌حل درون sandbox.