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.
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.