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 the sandbox for the task.

We have a horizontal Drag’n’Drop here.

To position the element we use position:relative and slider-relative coordinates for the thumb. Here it’s more convenient here than position:absolute.

Open the solution in the sandbox.