Create a slider:
Drag the blue thumb with the mouse and move it.
- 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.
As we can see from HTML/CSS, the slider is a
<div> with a colored background, that contains a runner – another
To position the runner we use
position:relative, to provide the coordinates relative to its parent, here it’s more convenient here than
Then we implement horizontal-only Drag’n’Drop with limitation by width.